@anker-in/headless-ui 1.1.30 → 1.1.32
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/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +2 -0
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -9
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/cjs/components/badge.d.ts +5 -2
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +3 -3
- package/dist/cjs/stories/badge.stories.d.ts +66 -1
- package/dist/cjs/stories/badge.stories.js +1 -1
- package/dist/cjs/stories/badge.stories.js.map +3 -3
- 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/ShelfDisplay/shelfDisplay.d.ts +2 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -9
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/esm/components/badge.d.ts +5 -2
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +3 -3
- package/dist/esm/stories/badge.stories.d.ts +66 -1
- package/dist/esm/stories/badge.stories.js +1 -1
- package/dist/esm/stories/badge.stories.js.map +3 -3
- package/package.json +1 -1
- package/style.css +45 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n isShowShortTitle = false,\n } = configuration || {}\n const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-12\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields, isShowShortTitle } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.length > 0 &&\n showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAoJc,OA0BF,YAAAA,GA1BE,OAAAC,EA0BF,QAAAC,MA1BE,oBApJd,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,sBAAAC,OAA0B,oBACnC,OAAOC,MAAa,8BACpB,OAAOC,OAAW,4BAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,OAAY,2BACrB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,OAAe,wBACxB,OAAS,eAAAC,OAAmB,8BAC5B,OAAS,WAAAC,OAAe,8BAExB,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,UAAAC,GAAQ,aAAAC,GAAW,WAAAC,EAAS,YAAAC,OAAgB,QAErD,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAGVC,GAAmBC,GAAc,CAC5C,MAAMC,EAAMD,GAAM,IACZE,EAAWF,GAAM,SACjBG,EAAUD,GAAU,KAAME,GAAcA,GAAM,MAAQH,CAAG,EACzDI,EAAWF,GAAS,OAAO,KAAOD,IAAW,CAAC,GAAG,OAAO,KAAO,GAC/DI,EAAUH,GAAS,OAAO,SAAWD,IAAW,CAAC,GAAG,OAAO,SAAWF,GAAM,aAAeA,GAAM,OAAS,GAEhH,MAAO,CACL,SAAAK,EACA,QAAAC,CACF,CACF,EAEaC,GAAuB,CAAC,CAAE,KAAAP,EAAM,cAAAQ,CAAc,IAA0C,CACnG,KAAM,CACJ,mBAAAC,EAAqB,GACrB,UAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EACA,oBAAAC,EACA,iBAAAC,EAAmB,EACrB,EAAIP,GAAiB,CAAC,EAChB,CAAE,OAAAQ,EAAS,KAAM,YAAAC,EAAa,gBAAAC,CAAgB,EAAIrC,GAAe,EACjE,CAAE,UAAAsC,EAAW,cAAAC,CAAc,EAAIT,GAAc,CAAC,EAC9CU,EAAM7B,GAAuB,IAAI,EACjC,CAAC8B,EAAUC,CAAW,EAAI5B,GAAmB,CAAC,CAAC,EAC/C,CAAC6B,EAAiBC,CAAkB,EAAI9B,GAAiB,EAAE,EAE3D+B,EAAkB,CAACC,EAA0BC,EAAe5B,EAAwB6B,IACxFrB,GAAe,OAAO,gBAAgBmB,EAAQC,EAAQ,EAAG5B,EAAM6B,CAAM,EAEjEC,EAAoB,CAACH,EAA0BC,EAAe5B,EAAwB6B,IAC1FrB,GAAe,OAAO,kBAAkBmB,EAAQC,EAAQ,EAAG5B,EAAM6B,CAAM,EAEnEE,EAAUrC,EAAQ,IAAM,CAC5B,MAAMsC,EAAWhC,GAAM,UAAY,CAAC,EACpC,GAAKgC,EAAS,OAGd,OAAKhC,GAAM,IAGJgC,GAAU,OAAQ5B,GAAcA,GAAM,MAAQJ,GAAM,GAAG,GAAKgC,EAAS,CAAC,EAFpEA,IAAW,CAAC,CAGvB,EAAG,CAAChC,GAAM,IAAKA,GAAM,QAAQ,CAAC,EAExBiC,EAAaF,GAAS,IAAI,QAAQ,GAAG,GAAK,CAAC,EAC3CG,EAAYD,IAAaA,GAAY,OAAS,CAAC,EAE/CE,EACJ,CAACJ,GAAS,kBAAoBA,GAAS,OAAO,SAAWjC,GAAkBiC,GAAS,QAAUjC,EAG1F+B,EAASE,GAAS,UAAU,CAAC,EAE7BK,EAAuB,GAAQtB,GAAuBe,GACtDQ,EAAerC,GAAM,OAAO,cAAgB,MAE5CsC,EAAY5C,EAChB,IACEZ,GAAmB,CACjB,OAAAkC,EACA,OAAQoB,EAAuBP,GAAQ,qBAAuBE,GAAS,MACvE,WAAYK,EAAuBL,GAAS,MAAQ,EACpD,aAAAM,EACA,gBAAAnB,CACF,CAAC,EACH,CAACmB,EAAcrB,EAAQoB,EAAsBP,GAAQ,qBAAsBE,CAAO,CACpF,EAEM,CAAE,MAAAQ,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,CAAe,EAAIJ,EAEjD,CAAE,SAAAjC,EAAU,QAAAC,CAAQ,EAAIP,GAAgBC,CAAI,EAE5C2C,EAAe3C,GAAM,aAAeA,GAAM,MAC1C4C,EAAsB7B,GACxBgB,GAAS,YAAY,OAAO,kBAAoBY,EAE9CE,EAAqB7C,GAAM,oBAAsBA,GAAM,YAEvD8C,EAAY,IAAM,CACtB,GAAIjB,GAAQ,aAAe,eAAgB,CACzC,MAAMkB,EAAYL,GAAkB,GAC9BM,EAAQD,EAAU,MAAM,wBAAwB,EACtD,GAAIC,EAAO,CACT,KAAM,CAAC,CAAEC,EAAQC,EAASC,EAAM,EAAIH,EACpC,IAAII,EAAiBF,EACrB,OAAIA,EAAQ,SAAS,KAAK,EACxBE,EAAiBF,EAAQ,QAAQ,QAAS,EAAE,EACnCA,EAAQ,SAAS,KAAK,IAC/BE,EAAiBF,EAAQ,QAAQ,OAAQ,EAAE,GAEtC,GAAGD,CAAM,GAAGG,CAAc,GAAGD,EAAM,EAC5C,CACA,OAAOJ,CACT,CACA,OAAON,GAAY,EACrB,EAGAhD,GAAU,IAAM,CACd,IAAI4D,EAAuB,CAAC,EAC5B,GAAIZ,GAAYC,EAAgB,CAC9B,MAAMY,EAAc,GAAGR,EAAU,CAAC,IAAI3B,GAAW,KAAOC,GAAe,KAAO,EAAE,GAChFK,EAAmB6B,CAAW,EAC9BD,EAAW,KAAKC,CAAW,CAC7B,CACA,MAAMC,EAAUvD,GAAM,MAClB,SAAUI,GAAiBA,GAAM,aAAa,OAAO,CAAC,GACtD,MAAOA,GAAiBA,GAAM,UAAU,SAAU,EAAE,CAAC,GACrD,QAAQ,EAAGqC,EAAW,EAAI,CAAC,EAC/BlB,EAAY8B,EAAW,OAAOE,CAAO,CAAC,CACxC,EAAG,CAACvD,GAAM,KAAMyC,EAAUC,EAAgBvB,GAAW,IAAKC,GAAe,GAAG,CAAC,EAE7E7B,GAAY8B,EAAK,CACf,cAAAzB,EACA,cAAAC,EACA,eAAgB8C,EAChB,qBAAsBE,EACtB,SAAUrC,GAAe,MAAQ,CACnC,CAAC,EAED,MAAMgD,EAAgB,IAElB5E,EAAAF,GAAA,CACG,UAAAmC,GAAaS,GAAU,OAAS,EAC/B3C,EAAC,OAAI,UAAU,2DACZ,SAAA2C,GAAU,MAAM,CAAClB,EAAWwB,IAC3BjD,EAACK,GAAA,CAAkB,UAAU,kBAC1B,SAAAoB,GADSwB,CAEZ,CACD,EACH,EACE,KACHgB,EACCjE,EAACW,GAAA,CACC,GAAG,KACH,MAAOsD,GAAuB,GAC9B,KAAM,EACN,UAAU,oEACV,KAAMA,GAAuB,GAC/B,EACE,KACHC,EACClE,EAACO,GAAA,CACC,KAAM,EACN,UAAU,8FACV,KAAM2D,GAAsB,GAC9B,EACE,KACJlE,EAAC,OAAI,UAAU,8BACZ,SAAAwD,EACCxD,EAAC,OAAI,UAAU,sDAAuD,SAAAsC,GAAa,YAAY,EAE/FrC,EAAAF,GAAA,CACE,UAAAC,EAAC,OAAI,UAAU,kEACZ,SAAAoD,GAAS,kBAAmBQ,GAAS,GACxC,EACA5D,EAAC,OAAI,UAAU,sFACZ,SAAAoD,GAAS,kBAAmBS,GAAa,GAC5C,GACF,EAEJ,EAEA5D,EAAC,OACC,UAAWK,EACT,0BACA,2CACAuB,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,gBACd7B,EAACQ,EAAA,CACC,QAAQ,YACR,QAAS,
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n isShowShortTitle = false,\n } = configuration || {}\n const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-12\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={() =>\n !data?.custom_secondary_link && onSecondaryButton(data, configuration?.index, configuration, coupon)\n }\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={() =>\n !data?.custom_primary_link && onPrimaryButton(data, configuration?.index, configuration, coupon)\n }\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields, isShowShortTitle } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.length > 0 &&\n showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={() =>\n !data?.custom_secondary_link && onSecondaryButton(data, configuration?.index, configuration, coupon)\n }\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={() =>\n !data?.custom_primary_link && onPrimaryButton(data, configuration?.index, configuration, coupon)\n }\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "isShowShortTitle", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "currentDisplayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -2,13 +2,16 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
4
|
size?: "lg" | "sm" | null | undefined;
|
|
5
|
+
variant?: "fill" | "outline" | "promotional" | null | undefined;
|
|
6
|
+
promotionalType?: "plus-member" | "regular-member" | "regular-discount" | "time-limited-discount" | null | undefined;
|
|
5
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
8
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
9
|
+
promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount';
|
|
7
10
|
}
|
|
8
11
|
/**
|
|
9
12
|
* Badge - 徽章
|
|
10
13
|
*
|
|
11
|
-
* @description
|
|
14
|
+
* @description 用于显示状态、标签或计数的小型标识组件，支持不同尺寸和促销类型
|
|
12
15
|
*/
|
|
13
|
-
declare function Badge({ className, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function Badge({ className, size, variant, promotionalType, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
14
17
|
export default Badge;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{cva as p}from"class-variance-authority";import{cn as C}from"../helpers/index.js";const d=p("text-brand-0 outline-brand-0 inline-flex items-center justify-center whitespace-nowrap rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] transition-colors focus:outline-none",{variants:{size:{sm:"h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] p-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"},variant:{outline:"bg-transparent",fill:"bg-brand-0 bg-gradient-brand text-white",promotional:"bg-gradient-brand relative border-none text-white outline-none"},promotionalType:{"plus-member":"bg-gradient-to-r from-[#6E6754] via-[#4A453A] to-[#070708] ","regular-member":"bg-brand-0 bg-gradient-brand ","regular-discount":"bg-brand-0 bg-gradient-brand ","time-limited-discount":"bg-brand-0 bg-gradient-brand "}},compoundVariants:[{variant:"promotional",size:"sm",class:"!pl-[24px]"},{variant:"promotional",size:"lg",class:"lg-desktop:!pl-[28px] !pl-[24px]"}],defaultVariants:{size:"lg",variant:"outline"}}),g=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 28",fill:"none",className:"h-full w-auto",children:[t("path",{d:"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z",fill:"url(#paint0_linear_22508_6946)"}),t("path",{d:"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z",fill:"url(#paint1_linear_22508_6946)"}),e("defs",{children:[e("linearGradient",{id:"paint0_linear_22508_6946",x1:"2.1318",y1:"0.390243",x2:"33.6892",y2:"7.35765",gradientUnits:"userSpaceOnUse",children:[t("stop",{offset:"0.0865385",stopColor:"#FFF5E0"}),t("stop",{offset:"1",stopColor:"#E8C08A"})]}),e("linearGradient",{id:"paint1_linear_22508_6946",x1:"7.79513",y1:"9.80078",x2:"25.937",y2:"13.8215",gradientUnits:"userSpaceOnUse",children:[t("stop",{offset:"0.9999",stopColor:"#6E6754"}),t("stop",{offset:"1",stopColor:"#050608"})]})]})]}),c=()=>e("svg",{width:"32",height:"28",viewBox:"0 0 32 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[t("path",{d:"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z",fill:"#B5E5F9"}),t("path",{d:"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z",fill:"white"})]}),u=()=>e("svg",{width:"32",height:"28",viewBox:"0 0 32 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[e("g",{clipPath:"url(#clip0_20420_244316)",children:[t("path",{opacity:"0.4",d:"M3.90567 7.45107C4.19697 6.0806 5.21359 4.9787 6.55622 4.57818L13.8699 2.39643C15.1173 2.02431 16.4683 2.31148 17.4565 3.15879L23.2505 8.12665C24.3141 9.03864 24.7946 10.4588 24.5033 11.8292L21.3938 26.4587C20.9541 28.527 18.921 29.8474 16.8527 29.4077L3.74508 26.6216C1.67675 26.182 0.356442 24.1489 0.796078 22.0805L3.90567 7.45107Z",fill:"#B5E5F9"}),t("path",{d:"M5 7.9615C5 6.50843 5.78799 5.16965 7.05839 4.46433L14.0584 0.57797C15.266 -0.0924777 16.734 -0.0924768 17.9416 0.577971L24.9416 4.46434C26.212 5.16966 27 6.50844 27 7.9615V24C27 26.2091 25.2091 28 23 28H9C6.79086 28 5 26.2091 5 24V7.9615Z",fill:"#B5E5F9"}),t("path",{d:"M20.3094 17.6141C21.0396 17.6143 21.7533 17.8311 22.3603 18.2371C22.9672 18.6431 23.4402 19.22 23.7194 19.8949C23.9986 20.5698 24.0715 21.3124 23.9288 22.0287C23.7861 22.745 23.4343 23.4029 22.9178 23.9192C22.4013 24.4355 21.7434 24.787 21.0272 24.9293C20.311 25.0715 19.5687 24.9982 18.8942 24.7184C18.2197 24.4387 17.6433 23.9652 17.2378 23.3577C16.8324 22.7503 16.6161 22.0362 16.6163 21.3058C16.6163 19.2667 18.2697 17.6141 20.3094 17.6141ZM10.8221 20.5232L19.527 11.8217C19.7491 11.6041 20.0454 11.4786 20.3562 11.4704C20.667 11.4622 20.9695 11.5719 21.2028 11.7776C21.4361 11.9832 21.583 12.2695 21.6139 12.579C21.6449 12.8885 21.5577 13.1983 21.3698 13.4461L21.2677 13.5618L12.5628 22.2632C12.3407 22.4808 12.0444 22.6064 11.7336 22.6145C11.4228 22.6227 11.1203 22.513 10.887 22.3074C10.6537 22.1017 10.5068 21.8154 10.4759 21.5059C10.4449 21.1964 10.5321 20.8867 10.72 20.6388L10.8221 20.5232ZM20.3094 20.0752C19.9831 20.0752 19.6702 20.2049 19.4395 20.4356C19.2088 20.6664 19.0792 20.9794 19.0792 21.3058C19.0792 21.6322 19.2088 21.9452 19.4395 22.176C19.6702 22.4067 19.9831 22.5364 20.3094 22.5364C20.6357 22.5364 20.9486 22.4067 21.1793 22.176C21.41 21.9452 21.5396 21.6322 21.5396 21.3058C21.5396 20.9794 21.41 20.6664 21.1793 20.4356C20.9486 20.2049 20.6357 20.0752 20.3094 20.0752ZM11.6931 9C12.4232 9.00024 13.1369 9.21707 13.7439 9.62306C14.3509 10.0291 14.8239 10.606 15.1031 11.2809C15.3823 11.9558 15.4552 12.6983 15.3125 13.4146C15.1698 14.131 14.818 14.7889 14.3015 15.3052C13.785 15.8215 13.1271 16.173 12.4109 16.3152C11.6947 16.4575 10.9524 16.3841 10.2779 16.1044C9.60339 15.8246 9.02696 15.3511 8.6215 14.7437C8.21604 14.1362 7.99976 13.4221 8 12.6917C8 10.6527 9.65339 9 11.6931 9ZM11.6931 11.4612C11.5315 11.4611 11.3715 11.4928 11.2222 11.5546C11.073 11.6164 10.9373 11.7069 10.823 11.8212C10.5922 12.0518 10.4624 12.3648 10.4622 12.6911C10.4621 13.0175 10.5915 13.3306 10.8221 13.5615C11.0527 13.7923 11.3656 13.9222 11.6918 13.9223C12.0181 13.9223 12.331 13.7927 12.5617 13.5619C12.7924 13.3311 12.922 13.0181 12.922 12.6917C12.922 12.3654 12.7924 12.0524 12.5617 11.8216C12.331 11.5908 12.0181 11.4612 11.6918 11.4612H11.6931Z",fill:"white"})]}),t("defs",{children:t("clipPath",{id:"clip0_20420_244316",children:t("rect",{width:"32",height:"28",fill:"white"})})})]}),m=()=>e("svg",{width:"24",height:"28",viewBox:"0 0 24 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[t("path",{d:"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z",fill:"#B5E5F9"}),t("path",{d:"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z",fill:"#B5E5F9"})]}),f={"plus-member":()=>t(g,{}),"regular-member":()=>t(c,{}),"regular-discount":()=>t(u,{}),"time-limited-discount":()=>t(m,{})};function x({className:r,size:s,variant:n="outline",promotionalType:o,...a}){const i=n==="promotional",l=i?f[o||"regular-discount"]:null;return e("div",{className:C(d({size:s,variant:n,promotionalType:i?o:void 0}),r),...a,children:[i&&l&&t("div",{className:"absolute inset-y-0 left-0 flex -translate-x-1/3 items-center",children:t(l,{})}),t("span",{className:i?"relative z-10":"",children:a.children})]})}var w=x;export{w as default};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\n/**\n * Badge - \u5FBD\u7AE0\n *\n * @description \u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u7684\u5C0F\u578B\u6807\u8BC6\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E0D\u540C\u5C3A\u5BF8\n */\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "cva", "cn", "badgeVariants", "Badge", "className", "size", "props", "badge_default"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center whitespace-nowrap rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] p-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n variant: {\n outline: 'bg-transparent',\n fill: 'bg-brand-0 bg-gradient-brand text-white',\n promotional: 'bg-gradient-brand relative border-none text-white outline-none',\n },\n promotionalType: {\n 'plus-member': 'bg-gradient-to-r from-[#6E6754] via-[#4A453A] to-[#070708] ',\n 'regular-member': 'bg-brand-0 bg-gradient-brand ',\n 'regular-discount': 'bg-brand-0 bg-gradient-brand ',\n 'time-limited-discount': 'bg-brand-0 bg-gradient-brand ',\n },\n },\n compoundVariants: [\n {\n variant: 'promotional',\n size: 'sm',\n class: '!pl-[24px]',\n },\n {\n variant: 'promotional',\n size: 'lg',\n class: 'lg-desktop:!pl-[28px] !pl-[24px]',\n },\n ],\n defaultVariants: {\n size: 'lg',\n variant: 'outline',\n },\n }\n)\n\n// \u4F1A\u5458\u6807\u8BC6\u56FE\u6807\nconst PlusPromotionalIcon = () => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 28\" fill=\"none\" className=\"h-full w-auto\">\n <path\n d=\"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z\"\n fill=\"url(#paint0_linear_22508_6946)\"\n />\n <path\n d=\"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z\"\n fill=\"url(#paint1_linear_22508_6946)\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_22508_6946\"\n x1=\"2.1318\"\n y1=\"0.390243\"\n x2=\"33.6892\"\n y2=\"7.35765\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0.0865385\" stopColor={'#FFF5E0'} />\n <stop offset=\"1\" stopColor={'#E8C08A'} />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_22508_6946\"\n x1=\"7.79513\"\n y1=\"9.80078\"\n x2=\"25.937\"\n y2=\"13.8215\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop offset=\"0.9999\" stopColor={'#6E6754'} />\n <stop offset=\"1\" stopColor={'#050608'} />\n </linearGradient>\n </defs>\n </svg>\n )\n}\n\nconst RegularMemberIcon = () => (\n <svg\n width=\"32\"\n height=\"28\"\n viewBox=\"0 0 32 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-full w-auto\"\n >\n <path\n d=\"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z\"\n fill=\"#B5E5F9\"\n />\n <path\n d=\"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z\"\n fill=\"white\"\n />\n </svg>\n)\n\nconst NormalDiscountIcon = () => (\n <svg\n width=\"32\"\n height=\"28\"\n viewBox=\"0 0 32 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-full w-auto\"\n >\n <g clipPath=\"url(#clip0_20420_244316)\">\n <path\n opacity=\"0.4\"\n d=\"M3.90567 7.45107C4.19697 6.0806 5.21359 4.9787 6.55622 4.57818L13.8699 2.39643C15.1173 2.02431 16.4683 2.31148 17.4565 3.15879L23.2505 8.12665C24.3141 9.03864 24.7946 10.4588 24.5033 11.8292L21.3938 26.4587C20.9541 28.527 18.921 29.8474 16.8527 29.4077L3.74508 26.6216C1.67675 26.182 0.356442 24.1489 0.796078 22.0805L3.90567 7.45107Z\"\n fill=\"#B5E5F9\"\n />\n <path\n d=\"M5 7.9615C5 6.50843 5.78799 5.16965 7.05839 4.46433L14.0584 0.57797C15.266 -0.0924777 16.734 -0.0924768 17.9416 0.577971L24.9416 4.46434C26.212 5.16966 27 6.50844 27 7.9615V24C27 26.2091 25.2091 28 23 28H9C6.79086 28 5 26.2091 5 24V7.9615Z\"\n fill=\"#B5E5F9\"\n />\n <path\n d=\"M20.3094 17.6141C21.0396 17.6143 21.7533 17.8311 22.3603 18.2371C22.9672 18.6431 23.4402 19.22 23.7194 19.8949C23.9986 20.5698 24.0715 21.3124 23.9288 22.0287C23.7861 22.745 23.4343 23.4029 22.9178 23.9192C22.4013 24.4355 21.7434 24.787 21.0272 24.9293C20.311 25.0715 19.5687 24.9982 18.8942 24.7184C18.2197 24.4387 17.6433 23.9652 17.2378 23.3577C16.8324 22.7503 16.6161 22.0362 16.6163 21.3058C16.6163 19.2667 18.2697 17.6141 20.3094 17.6141ZM10.8221 20.5232L19.527 11.8217C19.7491 11.6041 20.0454 11.4786 20.3562 11.4704C20.667 11.4622 20.9695 11.5719 21.2028 11.7776C21.4361 11.9832 21.583 12.2695 21.6139 12.579C21.6449 12.8885 21.5577 13.1983 21.3698 13.4461L21.2677 13.5618L12.5628 22.2632C12.3407 22.4808 12.0444 22.6064 11.7336 22.6145C11.4228 22.6227 11.1203 22.513 10.887 22.3074C10.6537 22.1017 10.5068 21.8154 10.4759 21.5059C10.4449 21.1964 10.5321 20.8867 10.72 20.6388L10.8221 20.5232ZM20.3094 20.0752C19.9831 20.0752 19.6702 20.2049 19.4395 20.4356C19.2088 20.6664 19.0792 20.9794 19.0792 21.3058C19.0792 21.6322 19.2088 21.9452 19.4395 22.176C19.6702 22.4067 19.9831 22.5364 20.3094 22.5364C20.6357 22.5364 20.9486 22.4067 21.1793 22.176C21.41 21.9452 21.5396 21.6322 21.5396 21.3058C21.5396 20.9794 21.41 20.6664 21.1793 20.4356C20.9486 20.2049 20.6357 20.0752 20.3094 20.0752ZM11.6931 9C12.4232 9.00024 13.1369 9.21707 13.7439 9.62306C14.3509 10.0291 14.8239 10.606 15.1031 11.2809C15.3823 11.9558 15.4552 12.6983 15.3125 13.4146C15.1698 14.131 14.818 14.7889 14.3015 15.3052C13.785 15.8215 13.1271 16.173 12.4109 16.3152C11.6947 16.4575 10.9524 16.3841 10.2779 16.1044C9.60339 15.8246 9.02696 15.3511 8.6215 14.7437C8.21604 14.1362 7.99976 13.4221 8 12.6917C8 10.6527 9.65339 9 11.6931 9ZM11.6931 11.4612C11.5315 11.4611 11.3715 11.4928 11.2222 11.5546C11.073 11.6164 10.9373 11.7069 10.823 11.8212C10.5922 12.0518 10.4624 12.3648 10.4622 12.6911C10.4621 13.0175 10.5915 13.3306 10.8221 13.5615C11.0527 13.7923 11.3656 13.9222 11.6918 13.9223C12.0181 13.9223 12.331 13.7927 12.5617 13.5619C12.7924 13.3311 12.922 13.0181 12.922 12.6917C12.922 12.3654 12.7924 12.0524 12.5617 11.8216C12.331 11.5908 12.0181 11.4612 11.6918 11.4612H11.6931Z\"\n fill=\"white\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_20420_244316\">\n <rect width=\"32\" height=\"28\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n)\n\nconst FlashDiscountIcon = () => (\n <svg\n width=\"24\"\n height=\"28\"\n viewBox=\"0 0 24 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-full w-auto\"\n >\n <path\n d=\"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z\"\n fill=\"#B5E5F9\"\n />\n <path\n d=\"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z\"\n fill=\"#B5E5F9\"\n />\n </svg>\n)\n\n// \u4FC3\u9500\u7C7B\u578B\u56FE\u6807\u6620\u5C04\nconst PromotionalIcons = {\n 'plus-member': () => <PlusPromotionalIcon />,\n 'regular-member': () => <RegularMemberIcon />,\n 'regular-discount': () => <NormalDiscountIcon />,\n 'time-limited-discount': () => <FlashDiscountIcon />,\n} as const\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {\n promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\n}\n\n/**\n * Badge - \u5FBD\u7AE0\n *\n * @description \u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u7684\u5C0F\u578B\u6807\u8BC6\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E0D\u540C\u5C3A\u5BF8\u548C\u4FC3\u9500\u7C7B\u578B\n */\nfunction Badge({ className, size, variant = 'outline', promotionalType, ...props }: BadgeProps) {\n const isPromotional = variant === 'promotional'\n\n // \u6839\u636E promotionalType \u9009\u62E9\u56FE\u6807\uFF0C\u5982\u679C\u6CA1\u6709\u6307\u5B9A\u5219\u4F7F\u7528\u9ED8\u8BA4\u7684 regular-discount\n const IconComponent = isPromotional ? PromotionalIcons[promotionalType || 'regular-discount'] : null\n\n return (\n <div\n className={cn(\n badgeVariants({\n size,\n variant,\n promotionalType: isPromotional ? promotionalType : undefined,\n }),\n className\n )}\n {...props}\n >\n {isPromotional && IconComponent && (\n <div className=\"absolute inset-y-0 left-0 flex -translate-x-1/3 items-center\">\n <IconComponent />\n </div>\n )}\n <span className={isPromotional ? 'relative z-10' : ''}>{props.children}</span>\n </div>\n )\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "cva", "cn", "badgeVariants", "PlusPromotionalIcon", "RegularMemberIcon", "NormalDiscountIcon", "FlashDiscountIcon", "PromotionalIcons", "Badge", "className", "size", "variant", "promotionalType", "props", "isPromotional", "IconComponent", "badge_default"]
|
|
7
7
|
}
|
|
@@ -5,6 +5,11 @@ declare const meta: {
|
|
|
5
5
|
component: typeof Badge;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
8
13
|
};
|
|
9
14
|
tags: string[];
|
|
10
15
|
argTypes: {
|
|
@@ -20,12 +25,72 @@ declare const meta: {
|
|
|
20
25
|
};
|
|
21
26
|
};
|
|
22
27
|
};
|
|
28
|
+
variant: {
|
|
29
|
+
control: {
|
|
30
|
+
type: "select";
|
|
31
|
+
};
|
|
32
|
+
options: string[];
|
|
33
|
+
description: string;
|
|
34
|
+
table: {
|
|
35
|
+
defaultValue: {
|
|
36
|
+
summary: string;
|
|
37
|
+
};
|
|
38
|
+
type: {
|
|
39
|
+
summary: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
promotionalType: {
|
|
44
|
+
control: {
|
|
45
|
+
type: "select";
|
|
46
|
+
};
|
|
47
|
+
options: string[];
|
|
48
|
+
description: string;
|
|
49
|
+
table: {
|
|
50
|
+
defaultValue: {
|
|
51
|
+
summary: string;
|
|
52
|
+
};
|
|
53
|
+
type: {
|
|
54
|
+
summary: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
if: {
|
|
58
|
+
arg: string;
|
|
59
|
+
eq: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
children: {
|
|
63
|
+
control: "text";
|
|
64
|
+
description: string;
|
|
65
|
+
table: {
|
|
66
|
+
type: {
|
|
67
|
+
summary: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
className: {
|
|
72
|
+
control: "text";
|
|
73
|
+
description: string;
|
|
74
|
+
table: {
|
|
75
|
+
type: {
|
|
76
|
+
summary: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
};
|
|
23
80
|
};
|
|
24
81
|
args: {
|
|
25
82
|
size: "lg";
|
|
83
|
+
variant: "outline";
|
|
84
|
+
children: string;
|
|
26
85
|
};
|
|
27
86
|
};
|
|
28
87
|
export default meta;
|
|
29
88
|
type Story = StoryObj<typeof meta>;
|
|
30
89
|
export declare const Default: Story;
|
|
31
|
-
export declare const
|
|
90
|
+
export declare const PlaygroundDemo: Story;
|
|
91
|
+
export declare const Variants: Story;
|
|
92
|
+
export declare const Sizes: Story;
|
|
93
|
+
export declare const Promotional: Story;
|
|
94
|
+
export declare const PromotionalExamples: Story;
|
|
95
|
+
export declare const PromotionalTypes: Story;
|
|
96
|
+
export declare const UsageExamples: Story;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{Badge as e}from"../components/index.js";import"react";const o={title:"Components/Badge",component:e,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","lg"],description:"Badge \u5C3A\u5BF8",table:{defaultValue:{summary:"lg"}}}},args:{size:"lg"}};var p=o;const l={args:{children:"New"}},m={render(){return t("div",{className:"flex flex-col space-y-4",children:t(e,{children:"New"})})}};export{l as Default,m as Examples,p as default};
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Badge as a}from"../components/index.js";import"react";const i={title:"Components/Badge",component:a,parameters:{layout:"centered",docs:{description:{component:"\u5FBD\u7AE0\u7EC4\u4EF6\u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u4FE1\u606F\u3002\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u548C\u6837\u5F0F\u53D8\u4F53\uFF0C\u5305\u62EC\u57FA\u7840\u8F6E\u5ED3\u6837\u5F0F\u3001\u586B\u5145\u6837\u5F0F\u4EE5\u53CA\u591A\u79CD\u4FC3\u9500\u5FBD\u7AE0\u7C7B\u578B\u3002\u4FC3\u9500\u5FBD\u7AE0\u652F\u6301\u56DB\u79CD\u7C7B\u578B\uFF1APlus\u4F1A\u5458\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09\u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\uFF08\u666E\u901A\u4F1A\u5458\u3001\u666E\u901A\u6298\u6263\u3001\u9650\u65F6\u6298\u6263\uFF09\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u90FD\u914D\u6709\u4E13\u5C5E\u56FE\u6807\u3002"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","lg"],description:"\u5FBD\u7AE0\u5C3A\u5BF8\uFF1Asm (24px\u9AD8\u5EA6) \u6216 lg (24px\u9AD8\u5EA6\uFF0C\u5927\u5C4F\u5E5528px\u9AD8\u5EA6)",table:{defaultValue:{summary:"lg"}}},variant:{control:{type:"select"},options:["outline","fill","promotional"],description:"\u5FBD\u7AE0\u53D8\u4F53\u6837\u5F0F\uFF1Aoutline (\u8F6E\u5ED3\u6837\u5F0F)\u3001fill (\u586B\u5145\u6837\u5F0F)\u3001promotional (\u4FC3\u9500\u6837\u5F0F\uFF0C\u652F\u6301\u4E0D\u540C\u4FC3\u9500\u7C7B\u578B)",table:{defaultValue:{summary:"outline"},type:{summary:"'outline' | 'fill' | 'promotional'"}}},promotionalType:{control:{type:"select"},options:["plus-member","regular-member","regular-discount","time-limited-discount"],description:"\u4FC3\u9500\u7C7B\u578B\uFF1Aplus-member (Plus\u4F1A\u5458\uFF0C\u6DF1\u8272\u6E10\u53D8) \u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u914D\u6709\u4E13\u5C5E\u56FE\u6807",table:{defaultValue:{summary:"undefined"},type:{summary:"'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'"}},if:{arg:"variant",eq:"promotional"}},children:{control:"text",description:"\u5FBD\u7AE0\u663E\u793A\u7684\u6587\u672C\u5185\u5BB9",table:{type:{summary:"ReactNode"}}},className:{control:"text",description:"\u989D\u5916\u7684CSS\u7C7B\u540D",table:{type:{summary:"string"}}}},args:{size:"lg",variant:"outline",children:"New"}};var s=i;const m={args:{children:"New"}},n={name:"Playground Demo",render(){return t("div",{className:"space-y-8 p-6",children:[t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u57FA\u7840\u5FBD\u7AE0"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"outline",children:"New"}),e(a,{variant:"outline",children:"20% OFF"}),e(a,{variant:"outline",children:"Limited"}),e(a,{variant:"outline",children:"Hot"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u586B\u5145\u5FBD\u7AE0"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"fill",children:"Sale"}),e(a,{variant:"fill",children:"15% OFF"}),e(a,{variant:"fill",children:"Bestseller"}),e(a,{variant:"fill",children:"Free Shipping"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4FC3\u9500\u5FBD\u7AE0"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"VIP Member"}),e(a,{variant:"promotional",promotionalType:"regular-discount",children:"Premium"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u4F1A\u5458\u4E13\u4EAB"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5C3A\u5BF8\u5BF9\u6BD4"}),t("div",{className:"space-y-3",children:[t("div",{className:"flex gap-4 items-center",children:[e("span",{className:"text-sm text-gray-600 w-16",children:"Small:"}),e(a,{size:"sm",variant:"outline",children:"New"}),e(a,{size:"sm",variant:"fill",children:"Sale"}),e(a,{size:"sm",variant:"promotional",promotionalType:"plus-member",children:"Plus"}),e(a,{size:"sm",variant:"promotional",promotionalType:"regular-member",children:"regular"}),e(a,{size:"sm",variant:"promotional",promotionalType:"regular-discount",children:"discount"}),e(a,{size:"sm",variant:"promotional",promotionalType:"time-limited-discount",children:"limited"})]}),t("div",{className:"flex gap-4 items-center",children:[e("span",{className:"text-sm text-gray-600 w-16",children:"Large:"}),e(a,{size:"lg",variant:"outline",children:"New"}),e(a,{size:"lg",variant:"fill",children:"Sale"}),e(a,{size:"lg",variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),e(a,{size:"lg",variant:"promotional",promotionalType:"regular-member",children:"regular Member"}),e(a,{size:"lg",variant:"promotional",promotionalType:"regular-discount",children:"discount"}),e(a,{size:"lg",variant:"promotional",promotionalType:"time-limited-discount",children:"limited"})]})]})]})]})}},p={name:"All Variants",render(){return t("div",{className:"flex gap-4 items-center",children:[e(a,{variant:"outline",children:"OUTLINE"}),e(a,{variant:"fill",children:"FILL"}),e(a,{variant:"promotional",children:"PROMOTIONAL"})]})}},d={name:"Size Variations",render(){return t("div",{className:"space-y-4",children:[t("div",{className:"flex gap-4 items-center",children:[e("span",{className:"text-sm text-gray-600 w-16",children:"Small:"}),e(a,{size:"sm",variant:"outline",children:"New"}),e(a,{size:"sm",variant:"fill",children:"Sale"}),e(a,{size:"sm",variant:"promotional",promotionalType:"plus-member",children:"Plus"})]}),t("div",{className:"flex gap-4 items-center",children:[e("span",{className:"text-sm text-gray-600 w-16",children:"Large:"}),e(a,{size:"lg",variant:"outline",children:"New"}),e(a,{size:"lg",variant:"fill",children:"Sale"}),e(a,{size:"lg",variant:"promotional",promotionalType:"plus-member",children:"Plus Member"})]})]})}},g={name:"Promotional Badge",args:{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}},c={name:"Promotional Scenarios",render(){return t("div",{className:"space-y-6 p-6",children:[t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4F1A\u5458\u7B49\u7EA7\u6807\u8BC6"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"VIP Member"}),e(a,{variant:"promotional",promotionalType:"plus-member",children:"Premium User"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u7279\u6B8A\u6743\u76CA\u6807\u7B7E"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u4EAB"}),e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u4E13\u5C5E\u4F18\u60E0"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u65E9\u9E1F\u7279\u60E0"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4EA7\u54C1\u6807\u8BC6"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u91CF\u7248"}),e(a,{variant:"promotional",promotionalType:"plus-member",children:"\u8054\u540D\u6B3E"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u72EC\u5BB6"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5E26\u88C5\u9970\u56FE\u6807\u6548\u679C"}),t("div",{className:"bg-gray-50 p-4 rounded-lg",children:[e("p",{className:"text-sm text-gray-600 mb-4",children:"\u4FC3\u9500\u5FBD\u7AE0\u81EA\u52A8\u5305\u542B\u5DE6\u4FA7\u88C5\u9970\u56FE\u6807\uFF0C\u91C7\u7528\u6E10\u53D8\u80CC\u666F\u8BBE\u8BA1\uFF0C\u6839\u636EpromotionalType\u663E\u793A\u4E0D\u540C\u7684\u989C\u8272\u548C\u56FE\u6807"}),e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"})]})]})]})}},v={name:"Promotional Types",render(){return t("div",{className:"space-y-8 p-6",children:[t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u6240\u6709\u4FC3\u9500\u7C7B\u578B"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus\u4E13\u4EAB"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4EF7"}),e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u65F6\u4F18\u60E0"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D\u4E2D"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"Plus\u4F1A\u5458\u4E13\u4EAB\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus\u4E13\u4EAB"}),e(a,{variant:"promotional",promotionalType:"plus-member",children:"VIP\u7279\u6743"}),e(a,{variant:"promotional",promotionalType:"plus-member",children:"\u4E13\u5C5E\u6743\u76CA"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u666E\u901A\u4F1A\u5458\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4EF7"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u5C5E"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"Member Only"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u666E\u901A\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u65F6\u4F18\u60E0"}),e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u7279\u4EF7"}),e(a,{variant:"promotional",promotionalType:"regular-discount",children:"\u4FC3\u9500\u4E2D"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u9650\u65F6\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u62A2\u8D2D\u4E2D"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u9650\u65F6\u79D2\u6740"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5411\u540E\u517C\u5BB9\uFF08\u9ED8\u8BA4\u6837\u5F0F\uFF09"}),t("div",{className:"flex flex-wrap gap-4 items-center",children:[e(a,{variant:"promotional",children:"\u4FC3\u9500\u6807\u7B7E"}),e("span",{className:"text-sm text-gray-500",children:"\u2190 \u4E0D\u6307\u5B9ApromotionalType\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684regular-discount\u6837\u5F0F"})]})]})]})}},y={name:"Usage Examples",render(){return t("div",{className:"space-y-6 p-6",children:[t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528"}),t("div",{className:"border border-gray-200 rounded-lg p-4 max-w-sm",children:[t("div",{className:"flex gap-2 mb-3",children:[e(a,{size:"sm",variant:"fill",children:"20% OFF"}),e(a,{size:"sm",variant:"outline",children:"New"})]}),e("h4",{className:"font-medium text-gray-900 mb-2",children:"AeroFit 2 Earbuds"}),e("div",{className:"mb-3",children:e(a,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member Price"})}),e("p",{className:"text-lg font-semibold text-gray-900",children:"$79.99"})]})]}),t("div",{className:"space-y-4",children:[e("h3",{className:"text-lg font-semibold text-gray-900",children:"\u6DF7\u5408\u4F7F\u7528\u573A\u666F"}),t("div",{className:"space-y-3",children:[t("div",{className:"flex gap-2 items-center",children:[e("span",{className:"text-sm text-gray-600 w-20",children:"\u6298\u6263\u6807\u7B7E:"}),e(a,{variant:"fill",children:"25% OFF"}),e(a,{variant:"outline",children:"Limited Time"})]}),t("div",{className:"flex gap-2 items-center",children:[e("span",{className:"text-sm text-gray-600 w-20",children:"\u4F1A\u5458\u6807\u8BC6:"}),e(a,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u4EAB"})]}),t("div",{className:"flex gap-2 items-center",children:[e("span",{className:"text-sm text-gray-600 w-20",children:"\u9650\u65F6\u4FC3\u9500:"}),e(a,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D\u4E2D"})]}),t("div",{className:"flex gap-2 items-center",children:[e("span",{className:"text-sm text-gray-600 w-20",children:"\u72B6\u6001\u6807\u7B7E:"}),e(a,{variant:"outline",children:"Hot"}),e(a,{variant:"outline",children:"Bestseller"})]})]})]})]})}};export{m as Default,n as PlaygroundDemo,g as Promotional,c as PromotionalExamples,v as PromotionalTypes,d as Sizes,y as UsageExamples,p as Variants,s as default};
|
|
2
2
|
//# sourceMappingURL=badge.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/badge.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Badge } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Components/Badge',\n component: Badge,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['sm', 'lg'],\n description: 'Badge \u5C3A\u5BF8',\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n },\n args: {\n size: 'lg',\n },\n} satisfies Meta<typeof Badge>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'New',\n },\n}\n\nexport const Examples: Story = {\n render() {\n return (\n <div className=\"flex flex-col space-y-4\">\n <Badge>New</Badge>\n </div>\n )\n },\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "Badge", "meta", "badge_stories_default", "Default", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Badge } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Components/Badge',\n component: Badge,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component:\n '\u5FBD\u7AE0\u7EC4\u4EF6\u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u4FE1\u606F\u3002\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u548C\u6837\u5F0F\u53D8\u4F53\uFF0C\u5305\u62EC\u57FA\u7840\u8F6E\u5ED3\u6837\u5F0F\u3001\u586B\u5145\u6837\u5F0F\u4EE5\u53CA\u591A\u79CD\u4FC3\u9500\u5FBD\u7AE0\u7C7B\u578B\u3002\u4FC3\u9500\u5FBD\u7AE0\u652F\u6301\u56DB\u79CD\u7C7B\u578B\uFF1APlus\u4F1A\u5458\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09\u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\uFF08\u666E\u901A\u4F1A\u5458\u3001\u666E\u901A\u6298\u6263\u3001\u9650\u65F6\u6298\u6263\uFF09\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u90FD\u914D\u6709\u4E13\u5C5E\u56FE\u6807\u3002',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['sm', 'lg'],\n description: '\u5FBD\u7AE0\u5C3A\u5BF8\uFF1Asm (24px\u9AD8\u5EA6) \u6216 lg (24px\u9AD8\u5EA6\uFF0C\u5927\u5C4F\u5E5528px\u9AD8\u5EA6)',\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n variant: {\n control: {\n type: 'select',\n },\n options: ['outline', 'fill', 'promotional'],\n description: '\u5FBD\u7AE0\u53D8\u4F53\u6837\u5F0F\uFF1Aoutline (\u8F6E\u5ED3\u6837\u5F0F)\u3001fill (\u586B\u5145\u6837\u5F0F)\u3001promotional (\u4FC3\u9500\u6837\u5F0F\uFF0C\u652F\u6301\u4E0D\u540C\u4FC3\u9500\u7C7B\u578B)',\n table: {\n defaultValue: { summary: 'outline' },\n type: { summary: \"'outline' | 'fill' | 'promotional'\" },\n },\n },\n promotionalType: {\n control: {\n type: 'select',\n },\n options: ['plus-member', 'regular-member', 'regular-discount', 'time-limited-discount'],\n description:\n '\u4FC3\u9500\u7C7B\u578B\uFF1Aplus-member (Plus\u4F1A\u5458\uFF0C\u6DF1\u8272\u6E10\u53D8) \u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u914D\u6709\u4E13\u5C5E\u56FE\u6807',\n table: {\n defaultValue: { summary: 'undefined' },\n type: { summary: \"'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\" },\n },\n if: { arg: 'variant', eq: 'promotional' },\n },\n children: {\n control: 'text',\n description: '\u5FBD\u7AE0\u663E\u793A\u7684\u6587\u672C\u5185\u5BB9',\n table: {\n type: { summary: 'ReactNode' },\n },\n },\n className: {\n control: 'text',\n description: '\u989D\u5916\u7684CSS\u7C7B\u540D',\n table: {\n type: { summary: 'string' },\n },\n },\n },\n args: {\n size: 'lg',\n variant: 'outline',\n children: 'New',\n },\n} satisfies Meta<typeof Badge>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'New',\n },\n}\n\nexport const PlaygroundDemo: Story = {\n name: 'Playground Demo',\n render() {\n return (\n <div className=\"space-y-8 p-6\">\n {/* \u57FA\u7840\u793A\u4F8B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u57FA\u7840\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"outline\">New</Badge>\n <Badge variant=\"outline\">20% OFF</Badge>\n <Badge variant=\"outline\">Limited</Badge>\n <Badge variant=\"outline\">Hot</Badge>\n </div>\n </div>\n\n {/* \u586B\u5145\u6837\u5F0F */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u586B\u5145\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"fill\">Sale</Badge>\n <Badge variant=\"fill\">15% OFF</Badge>\n <Badge variant=\"fill\">Bestseller</Badge>\n <Badge variant=\"fill\">Free Shipping</Badge>\n </div>\n </div>\n\n {/* \u4FC3\u9500\u5FBD\u7AE0 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4FC3\u9500\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n VIP Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n Premium\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n </div>\n </div>\n\n {/* \u5C3A\u5BF8\u5BF9\u6BD4 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5C3A\u5BF8\u5BF9\u6BD4</h3>\n <div className=\"space-y-3\">\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Small:</span>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"sm\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"regular-member\">\n regular\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"regular-discount\">\n discount\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"time-limited-discount\">\n limited\n </Badge>\n </div>\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Large:</span>\n <Badge size=\"lg\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"lg\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"regular-member\">\n regular Member\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"regular-discount\">\n discount\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"time-limited-discount\">\n limited\n </Badge>\n </div>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const Variants: Story = {\n name: 'All Variants',\n render() {\n return (\n <div className=\"flex gap-4 items-center\">\n <Badge variant=\"outline\">OUTLINE</Badge>\n <Badge variant=\"fill\">FILL</Badge>\n <Badge variant=\"promotional\">PROMOTIONAL</Badge>\n </div>\n )\n },\n}\n\nexport const Sizes: Story = {\n name: 'Size Variations',\n render() {\n return (\n <div className=\"space-y-4\">\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Small:</span>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"sm\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\n </Badge>\n </div>\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Large:</span>\n <Badge size=\"lg\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"lg\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n </div>\n </div>\n )\n },\n}\n\nexport const Promotional: Story = {\n name: 'Promotional Badge',\n args: {\n variant: 'promotional',\n promotionalType: 'plus-member',\n children: 'Plus Member',\n },\n}\n\nexport const PromotionalExamples: Story = {\n name: 'Promotional Scenarios',\n render() {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4F1A\u5458\u7B49\u7EA7\u6807\u8BC6</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n VIP Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Premium User\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u7279\u6B8A\u6743\u76CA\u6807\u7B7E</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u4E13\u5C5E\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u65E9\u9E1F\u7279\u60E0\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4EA7\u54C1\u6807\u8BC6</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u91CF\u7248\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n \u8054\u540D\u6B3E\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u72EC\u5BB6\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5E26\u88C5\u9970\u56FE\u6807\u6548\u679C</h3>\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-4\">\n \u4FC3\u9500\u5FBD\u7AE0\u81EA\u52A8\u5305\u542B\u5DE6\u4FA7\u88C5\u9970\u56FE\u6807\uFF0C\u91C7\u7528\u6E10\u53D8\u80CC\u666F\u8BBE\u8BA1\uFF0C\u6839\u636EpromotionalType\u663E\u793A\u4E0D\u540C\u7684\u989C\u8272\u548C\u56FE\u6807\n </p>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const PromotionalTypes: Story = {\n name: 'Promotional Types',\n render() {\n return (\n <div className=\"space-y-8 p-6\">\n {/* \u6240\u6709\u4FC3\u9500\u7C7B\u578B\u5C55\u793A */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u6240\u6709\u4FC3\u9500\u7C7B\u578B</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u65F6\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\u4E2D\n </Badge>\n </div>\n </div>\n\n {/* Plus\u4F1A\u5458\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">Plus\u4F1A\u5458\u4E13\u4EAB\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n VIP\u7279\u6743\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n \u4E13\u5C5E\u6743\u76CA\n </Badge>\n </div>\n </div>\n\n {/* \u666E\u901A\u4F1A\u5458\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u666E\u901A\u4F1A\u5458\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u5C5E\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n Member Only\n </Badge>\n </div>\n </div>\n\n {/* \u666E\u901A\u6298\u6263\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u666E\u901A\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u65F6\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u7279\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u4FC3\u9500\u4E2D\n </Badge>\n </div>\n </div>\n\n {/* \u9650\u65F6\u6298\u6263\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u9650\u65F6\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u62A2\u8D2D\u4E2D\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u9650\u65F6\u79D2\u6740\n </Badge>\n </div>\n </div>\n\n {/* \u5411\u540E\u517C\u5BB9\u6027\u5C55\u793A */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5411\u540E\u517C\u5BB9\uFF08\u9ED8\u8BA4\u6837\u5F0F\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\">\u4FC3\u9500\u6807\u7B7E</Badge>\n <span className=\"text-sm text-gray-500\">\u2190 \u4E0D\u6307\u5B9ApromotionalType\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684regular-discount\u6837\u5F0F</span>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const UsageExamples: Story = {\n name: 'Usage Examples',\n render() {\n return (\n <div className=\"space-y-6 p-6\">\n {/* \u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528</h3>\n <div className=\"border border-gray-200 rounded-lg p-4 max-w-sm\">\n <div className=\"flex gap-2 mb-3\">\n <Badge size=\"sm\" variant=\"fill\">\n 20% OFF\n </Badge>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n </div>\n <h4 className=\"font-medium text-gray-900 mb-2\">AeroFit 2 Earbuds</h4>\n <div className=\"mb-3\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member Price\n </Badge>\n </div>\n <p className=\"text-lg font-semibold text-gray-900\">$79.99</p>\n </div>\n </div>\n\n {/* \u4E0D\u540C\u573A\u666F\u7684\u6DF7\u5408\u4F7F\u7528 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u6DF7\u5408\u4F7F\u7528\u573A\u666F</h3>\n <div className=\"space-y-3\">\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u6298\u6263\u6807\u7B7E:</span>\n <Badge variant=\"fill\">25% OFF</Badge>\n <Badge variant=\"outline\">Limited Time</Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u4F1A\u5458\u6807\u8BC6:</span>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u9650\u65F6\u4FC3\u9500:</span>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\u4E2D\n </Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u72B6\u6001\u6807\u7B7E:</span>\n <Badge variant=\"outline\">Hot</Badge>\n <Badge variant=\"outline\">Bestseller</Badge>\n </div>\n </div>\n </div>\n </div>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "AA4FU,cAAAA,EACA,QAAAC,MADA,oBA1FV,OAAS,SAAAC,MAAa,yBACtB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWD,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,wuBACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,IAAI,EACpB,YAAa,2HACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,OAAQ,aAAa,EAC1C,YAAa,sNACb,MAAO,CACL,aAAc,CAAE,QAAS,SAAU,EACnC,KAAM,CAAE,QAAS,oCAAqC,CACxD,CACF,EACA,gBAAiB,CACf,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,cAAe,iBAAkB,mBAAoB,uBAAuB,EACtF,YACE,wRACF,MAAO,CACL,aAAc,CAAE,QAAS,WAAY,EACrC,KAAM,CAAE,QAAS,iFAAkF,CACrG,EACA,GAAI,CAAE,IAAK,UAAW,GAAI,aAAc,CAC1C,EACA,SAAU,CACR,QAAS,OACT,YAAa,yDACb,MAAO,CACL,KAAM,CAAE,QAAS,WAAY,CAC/B,CACF,EACA,UAAW,CACT,QAAS,OACT,YAAa,oCACb,MAAO,CACL,KAAM,CAAE,QAAS,QAAS,CAC5B,CACF,CACF,EACA,KAAM,CACJ,KAAM,KACN,QAAS,UACT,SAAU,KACZ,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,KACZ,CACF,EAEaC,EAAwB,CACnC,KAAM,kBACN,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,gBAEb,UAAAA,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,oCAAI,EACxDC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,UAAU,eAAG,EAC5BF,EAACE,EAAA,CAAM,QAAQ,UAAU,mBAAO,EAChCF,EAACE,EAAA,CAAM,QAAQ,UAAU,mBAAO,EAChCF,EAACE,EAAA,CAAM,QAAQ,UAAU,eAAG,GAC9B,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,oCAAI,EACxDC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,OAAO,gBAAI,EAC1BF,EAACE,EAAA,CAAM,QAAQ,OAAO,mBAAO,EAC7BF,EAACE,EAAA,CAAM,QAAQ,OAAO,sBAAU,EAChCF,EAACE,EAAA,CAAM,QAAQ,OAAO,yBAAa,GACrC,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,oCAAI,EACxDC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,uBAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,sBAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,mBAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,oCAErE,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,oCAAI,EACxDC,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,kBAAM,EACnDA,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,UAAU,eAEnC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,OAAO,gBAEhC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,cAAc,gBAErE,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,iBAAiB,mBAExE,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,mBAAmB,oBAE1E,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,wBAAwB,mBAE/E,GACF,EACAD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,kBAAM,EACnDA,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,UAAU,eAEnC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,OAAO,gBAEhC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,cAAc,uBAErE,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,iBAAiB,0BAExE,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,mBAAmB,oBAE1E,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,wBAAwB,mBAE/E,GACF,GACF,GACF,GACF,CAEJ,CACF,EAEaK,EAAkB,CAC7B,KAAM,eACN,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,UAAU,mBAAO,EAChCF,EAACE,EAAA,CAAM,QAAQ,OAAO,gBAAI,EAC1BF,EAACE,EAAA,CAAM,QAAQ,cAAc,uBAAW,GAC1C,CAEJ,CACF,EAEaM,EAAe,CAC1B,KAAM,kBACN,QAAS,CACP,OACEP,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,kBAAM,EACnDA,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,UAAU,eAEnC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,OAAO,gBAEhC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,cAAc,gBAErE,GACF,EACAD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,kBAAM,EACnDA,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,UAAU,eAEnC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,OAAO,gBAEhC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,cAAc,gBAAgB,cAAc,uBAErE,GACF,GACF,CAEJ,CACF,EAEaO,EAAqB,CAChC,KAAM,oBACN,KAAM,CACJ,QAAS,cACT,gBAAiB,cACjB,SAAU,aACZ,CACF,EAEaC,EAA6B,CACxC,KAAM,wBACN,QAAS,CACP,OACET,EAAC,OAAI,UAAU,gBACb,UAAAA,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,gDAAM,EAC1DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,uBAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,sBAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,wBAE3D,GACF,GACF,EAEAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,gDAAM,EAC1DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,oCAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,oCAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,oCAErE,GACF,GACF,EAEAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,oCAAI,EACxDC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,8BAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,8BAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,wBAErE,GACF,GACF,EAEAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,sDAAO,EAC3DC,EAAC,OAAI,UAAU,4BACb,UAAAD,EAAC,KAAE,UAAU,6BAA6B,mPAE1C,EACAA,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,uBAE3D,GACF,GACF,GACF,CAEJ,CACF,EAEaS,EAA0B,CACrC,KAAM,oBACN,QAAS,CACP,OACEV,EAAC,OAAI,UAAU,gBAEb,UAAAA,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,gDAAM,EAC1DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,4BAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,8BAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,oCAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,8BAErE,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,4EAAc,EAClEC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,4BAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,2BAE3D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,oCAE3D,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,8EAAW,EAC/DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,8BAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,oCAE9D,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,uBAE9D,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,8EAAW,EAC/DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,oCAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,wBAEhE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,mBAAmB,8BAEhE,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,8EAAW,EAC/DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,wBAErE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,8BAErE,EACAF,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,oCAErE,GACF,GACF,EAGAD,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,wEAAU,EAC9DC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,cAAc,oCAAI,EACjCF,EAAC,QAAK,UAAU,wBAAwB,oHAA4C,GACtF,GACF,GACF,CAEJ,CACF,EAEaY,EAAuB,CAClC,KAAM,iBACN,QAAS,CACP,OACEX,EAAC,OAAI,UAAU,gBAEb,UAAAA,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,4DAAQ,EAC5DC,EAAC,OAAI,UAAU,iDACb,UAAAA,EAAC,OAAI,UAAU,kBACb,UAAAD,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,OAAO,mBAEhC,EACAF,EAACE,EAAA,CAAM,KAAK,KAAK,QAAQ,UAAU,eAEnC,GACF,EACAF,EAAC,MAAG,UAAU,iCAAiC,6BAAiB,EAChEA,EAAC,OAAI,UAAU,OACb,SAAAA,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,cAAc,6BAE3D,EACF,EACAF,EAAC,KAAE,UAAU,sCAAsC,kBAAM,GAC3D,GACF,EAGAC,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,gDAAM,EAC1DC,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,qCAAK,EAClDA,EAACE,EAAA,CAAM,QAAQ,OAAO,mBAAO,EAC7BF,EAACE,EAAA,CAAM,QAAQ,UAAU,wBAAY,GACvC,EACAD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,qCAAK,EAClDA,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,iBAAiB,oCAE9D,GACF,EACAD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,qCAAK,EAClDA,EAACE,EAAA,CAAM,QAAQ,cAAc,gBAAgB,wBAAwB,8BAErE,GACF,EACAD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,6BAA6B,qCAAK,EAClDA,EAACE,EAAA,CAAM,QAAQ,UAAU,eAAG,EAC5BF,EAACE,EAAA,CAAM,QAAQ,UAAU,sBAAU,GACrC,GACF,GACF,GACF,CAEJ,CACF",
|
|
6
|
+
"names": ["jsx", "jsxs", "Badge", "meta", "badge_stories_default", "Default", "PlaygroundDemo", "Variants", "Sizes", "Promotional", "PromotionalExamples", "PromotionalTypes", "UsageExamples"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -469,6 +469,10 @@ video {
|
|
|
469
469
|
.inset-0 {
|
|
470
470
|
inset: 0px;
|
|
471
471
|
}
|
|
472
|
+
.inset-y-0 {
|
|
473
|
+
top: 0px;
|
|
474
|
+
bottom: 0px;
|
|
475
|
+
}
|
|
472
476
|
.-bottom-12 {
|
|
473
477
|
bottom: -3rem;
|
|
474
478
|
}
|
|
@@ -806,6 +810,9 @@ video {
|
|
|
806
810
|
.w-\[16px\] {
|
|
807
811
|
width: 16px;
|
|
808
812
|
}
|
|
813
|
+
.w-auto {
|
|
814
|
+
width: auto;
|
|
815
|
+
}
|
|
809
816
|
.w-fit {
|
|
810
817
|
width: -moz-fit-content;
|
|
811
818
|
width: fit-content;
|
|
@@ -838,6 +845,10 @@ video {
|
|
|
838
845
|
--tw-translate-x: -50%;
|
|
839
846
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
840
847
|
}
|
|
848
|
+
.-translate-x-1\/3 {
|
|
849
|
+
--tw-translate-x: -33.333333%;
|
|
850
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
851
|
+
}
|
|
841
852
|
.-translate-y-1\/2 {
|
|
842
853
|
--tw-translate-y: -50%;
|
|
843
854
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -954,6 +965,9 @@ video {
|
|
|
954
965
|
text-overflow: ellipsis;
|
|
955
966
|
white-space: nowrap;
|
|
956
967
|
}
|
|
968
|
+
.whitespace-nowrap {
|
|
969
|
+
white-space: nowrap;
|
|
970
|
+
}
|
|
957
971
|
.text-balance {
|
|
958
972
|
text-wrap: balance;
|
|
959
973
|
}
|
|
@@ -1129,6 +1143,24 @@ video {
|
|
|
1129
1143
|
.\!bg-none {
|
|
1130
1144
|
background-image: none !important;
|
|
1131
1145
|
}
|
|
1146
|
+
.bg-gradient-brand {
|
|
1147
|
+
background-image: var(--brand-gradient-color-0);
|
|
1148
|
+
}
|
|
1149
|
+
.bg-gradient-to-r {
|
|
1150
|
+
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
1151
|
+
}
|
|
1152
|
+
.from-\[\#6E6754\] {
|
|
1153
|
+
--tw-gradient-from: #6E6754 var(--tw-gradient-from-position);
|
|
1154
|
+
--tw-gradient-to: rgb(110 103 84 / 0) var(--tw-gradient-to-position);
|
|
1155
|
+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
1156
|
+
}
|
|
1157
|
+
.via-\[\#4A453A\] {
|
|
1158
|
+
--tw-gradient-to: rgb(74 69 58 / 0) var(--tw-gradient-to-position);
|
|
1159
|
+
--tw-gradient-stops: var(--tw-gradient-from), #4A453A var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
1160
|
+
}
|
|
1161
|
+
.to-\[\#070708\] {
|
|
1162
|
+
--tw-gradient-to: #070708 var(--tw-gradient-to-position);
|
|
1163
|
+
}
|
|
1132
1164
|
.\!decoration-clone {
|
|
1133
1165
|
-webkit-box-decoration-break: clone !important;
|
|
1134
1166
|
box-decoration-break: clone !important;
|
|
@@ -1157,6 +1189,9 @@ video {
|
|
|
1157
1189
|
.p-6 {
|
|
1158
1190
|
padding: 1.5rem;
|
|
1159
1191
|
}
|
|
1192
|
+
.p-\[6px\] {
|
|
1193
|
+
padding: 6px;
|
|
1194
|
+
}
|
|
1160
1195
|
.px-2 {
|
|
1161
1196
|
padding-left: 0.5rem;
|
|
1162
1197
|
padding-right: 0.5rem;
|
|
@@ -1208,6 +1243,9 @@ video {
|
|
|
1208
1243
|
.\!pl-0 {
|
|
1209
1244
|
padding-left: 0px !important;
|
|
1210
1245
|
}
|
|
1246
|
+
.\!pl-\[24px\] {
|
|
1247
|
+
padding-left: 24px !important;
|
|
1248
|
+
}
|
|
1211
1249
|
.pb-2\.5 {
|
|
1212
1250
|
padding-bottom: 0.625rem;
|
|
1213
1251
|
}
|
|
@@ -1399,6 +1437,10 @@ video {
|
|
|
1399
1437
|
.text-primary {
|
|
1400
1438
|
color: var(--brand-color-0);
|
|
1401
1439
|
}
|
|
1440
|
+
.text-white {
|
|
1441
|
+
--tw-text-opacity: 1;
|
|
1442
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
1443
|
+
}
|
|
1402
1444
|
.underline {
|
|
1403
1445
|
text-decoration-line: underline;
|
|
1404
1446
|
}
|
|
@@ -1457,10 +1499,6 @@ video {
|
|
|
1457
1499
|
.filter {
|
|
1458
1500
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1459
1501
|
}
|
|
1460
|
-
.backdrop-blur-sm {
|
|
1461
|
-
--tw-backdrop-blur: blur(4px);
|
|
1462
|
-
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
1463
|
-
}
|
|
1464
1502
|
.transition-all {
|
|
1465
1503
|
transition-property: all;
|
|
1466
1504
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -1902,6 +1940,9 @@ video {
|
|
|
1902
1940
|
padding-left: calc(50% - 832px);
|
|
1903
1941
|
padding-right: calc(50% - 832px);
|
|
1904
1942
|
}
|
|
1943
|
+
.lg-desktop\:\!pl-\[28px\] {
|
|
1944
|
+
padding-left: 28px !important;
|
|
1945
|
+
}
|
|
1905
1946
|
.lg-desktop\:pb-\[128px\] {
|
|
1906
1947
|
padding-bottom: 128px;
|
|
1907
1948
|
}
|