@anker-in/headless-ui 1.0.26-alpha.1762780691263 → 1.0.26-alpha.1762841026334
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/FeatureCards/FeatureCards.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/cjs/biz-components/FeatureCards/types.d.ts +2 -0
- package/dist/cjs/biz-components/FeatureCards/types.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/types.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js +1 -1
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js.map +3 -3
- package/dist/cjs/biz-components/Listing/hooks/useDiscountEnable.d.ts +5 -5
- package/dist/cjs/biz-components/Listing/hooks/useDiscountEnable.js +1 -1
- package/dist/cjs/biz-components/Listing/hooks/useDiscountEnable.js.map +3 -3
- package/dist/cjs/biz-components/Listing/types.d.ts +1 -0
- package/dist/cjs/biz-components/Listing/types.js +1 -1
- package/dist/cjs/biz-components/Listing/types.js.map +1 -1
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +2 -2
- package/dist/cjs/shared/ErrorBoundary.d.ts +18 -0
- package/dist/cjs/shared/ErrorBoundary.js +2 -0
- package/dist/cjs/shared/ErrorBoundary.js.map +7 -0
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/cjs/stories/featureCards.stories.js +21 -1
- package/dist/cjs/stories/featureCards.stories.js.map +3 -3
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/esm/biz-components/FeatureCards/types.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js +1 -1
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js.map +3 -3
- package/dist/esm/biz-components/Listing/hooks/useDiscountEnable.d.ts +5 -5
- package/dist/esm/biz-components/Listing/hooks/useDiscountEnable.js +1 -1
- package/dist/esm/biz-components/Listing/hooks/useDiscountEnable.js.map +3 -3
- package/dist/esm/biz-components/Listing/types.d.ts +1 -0
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/esm/shared/ErrorBoundary.d.ts +18 -0
- package/dist/esm/shared/ErrorBoundary.js +2 -0
- package/dist/esm/shared/ErrorBoundary.js.map +7 -0
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/dist/esm/stories/featureCards.stories.js +22 -2
- package/dist/esm/stories/featureCards.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n <ErrorBoundary>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </ErrorBoundary>\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
|
|
5
|
+
"mappings": "AAkES,OAsEH,YAAAA,EAtEG,OAAAC,EAuED,QAAAC,MAvEC,oBAlET,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAC1B,OAAOC,MAAmB,qBAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYT,EAAkBQ,CAAK,EACzC,MAAO,SAAST,EAAWU,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFlB,EAAC,SAAM,yBAAwB,GAAC,gBAAeiB,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMd,EAAQ,IAAMkB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBpB,EAAQ,IAAMH,EAACmB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACnDc,EAAgBD,EAAahB,EAAkBgB,CAAU,EAAI,GAC7DE,EAAiBH,EAAcd,EAAwBc,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAa3B,EAAM,WAIvB,CAACW,EAAOmB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGhB,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAqB,EAAW,eAAAX,CAAe,EAAIH,EAAUa,EAAkBpB,GAAe,IAAI,EAE/EsB,EAAwBtB,GAE1Bb,EAACQ,EAAA,CAAU,UAAW,GAAG0B,CAAS,IAAKrB,GAAe,SAAS,GAC7D,SAAAb,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWiB,EAAsBX,CAAK,EAC9C,SAAAb,EAAC8B,EAAA,CAAkB,GAAIjB,EAAwB,IAAKmB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BvB,GAE7Bb,EAAC8B,EAAA,CACE,GAAIjB,EACL,UAAW,GAAGqB,CAAS,IAAKrB,GAAe,SAAS,GACpD,IAAKmB,EACP,EAIJ,OACEhC,EAAAD,EAAA,CACE,SAAAE,EAACQ,EAAA,CACA,UAAAc,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDsB,EAAqBtB,CAAK,EAC1BuB,EAAwBvB,CAAK,GAC/B,EACJ,CAEJ,CAAC,EAGD,OAAAgB,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,24 @@
|
|
|
1
|
-
import"react";import
|
|
1
|
+
import"react";import s from"../biz-components/FeatureCards/index.js";const a={title:"Biz Components/FeatureCards",component:s,parameters:{layout:"padded",docs:{description:{component:`\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027
|
|
2
|
+
|
|
3
|
+
## \u54CD\u5E94\u5F0F\u5E03\u5C40
|
|
4
|
+
|
|
5
|
+
### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F
|
|
6
|
+
- \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A
|
|
7
|
+
|
|
8
|
+
### \u684C\u9762\u7AEF\uFF08laptop+\uFF09
|
|
9
|
+
\u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A
|
|
10
|
+
- **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B
|
|
11
|
+
- **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD
|
|
12
|
+
- **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09
|
|
13
|
+
- **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09
|
|
14
|
+
|
|
15
|
+
## \u5706\u89D2\u914D\u7F6E
|
|
16
|
+
|
|
17
|
+
\u901A\u8FC7 \`rounded\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A
|
|
18
|
+
- **\u9ED8\u8BA4**\uFF1A\`rounded: false\`\uFF08\u76F4\u89D2\uFF09
|
|
19
|
+
- **\u5F00\u542F\u5706\u89D2**\uFF1A\`rounded: true\`
|
|
20
|
+
- laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2
|
|
21
|
+
- laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`}}},tags:["autodocs"]};var n=a;const e={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},d={args:{data:e}},c={args:{data:{...e,items:e.items.map(t=>({...t,theme:"light"}))}}},l={args:{data:{...e,items:e.items.map(t=>({...t,link:"https://www.example.com"}))}}},p={args:{data:{...e,items:e.items.slice(0,2)}}},m={args:{data:{...e,items:[e.items[0]]}}},f={args:{data:{title:"Personalized Carpet Cleaning Mode",items:e.items}}},u={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},g={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}]}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},h={args:{data:{...e,rounded:!0}},parameters:{docs:{description:{story:"\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2"}}}},y={args:{data:{...e,items:e.items.slice(0,2),rounded:!0}},parameters:{docs:{description:{story:"2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40"}}}},b={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}],rounded:!0}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},_={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}],rounded:!0}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},S={args:{data:e,className:"custom-feature-cards"},parameters:{docs:{description:{story:`
|
|
2
22
|
\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
|
|
3
23
|
|
|
4
24
|
**\u6839\u5143\u7D20\uFF1A**
|
|
@@ -48,5 +68,5 @@ import"react";import a from"../biz-components/FeatureCards/index.js";const s={ti
|
|
|
48
68
|
gap: 24px;
|
|
49
69
|
}
|
|
50
70
|
\`\`\`
|
|
51
|
-
`}}}};export{d as Default,u as FourCards,
|
|
71
|
+
`}}}};export{d as Default,g as FiveCards,_ as FiveCardsWithRounded,u as FourCards,b as FourCardsWithRounded,c as LightTheme,m as SingleCard,p as TwoCards,y as TwoCardsWithRounded,S as WithCustomStyles,l as WithLinks,h as WithRounded,f as WithoutSubtitle,n as default};
|
|
52
72
|
//# sourceMappingURL=featureCards.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/featureCards.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: '\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAkB,0CAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,
|
|
6
|
-
"names": ["FeatureCards", "meta", "featureCards_stories_default", "defaultData", "Default", "LightTheme", "item", "WithLinks", "TwoCards", "SingleCard", "WithoutSubtitle", "FourCards", "WithCustomStyles"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\n\n## \u54CD\u5E94\u5F0F\u5E03\u5C40\n\n### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F\n- \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A\n\n### \u684C\u9762\u7AEF\uFF08laptop+\uFF09\n\u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A\n- **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B\n- **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD\n- **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n- **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n\n## \u5706\u89D2\u914D\u7F6E\n\n\u901A\u8FC7 \\`rounded\\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A\n- **\u9ED8\u8BA4**\uFF1A\\`rounded: false\\`\uFF08\u76F4\u89D2\uFF09\n- **\u5F00\u542F\u5706\u89D2**\uFF1A\\`rounded: true\\`\n - laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2\n - laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2',\n },\n },\n },\n}\n\nexport const TwoCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40',\n },\n },\n },\n}\n\nexport const FourCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FeatureCards", "meta", "featureCards_stories_default", "defaultData", "Default", "LightTheme", "item", "WithLinks", "TwoCards", "SingleCard", "WithoutSubtitle", "FourCards", "FiveCards", "WithRounded", "TwoCardsWithRounded", "FourCardsWithRounded", "FiveCardsWithRounded", "WithCustomStyles"]
|
|
7
7
|
}
|