@anker-in/headless-ui 0.0.27-alpha.22 → 0.0.27-alpha.23
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/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/types.d.ts +10 -12
- package/dist/cjs/biz-components/Slogan/types.js +1 -1
- package/dist/cjs/biz-components/Slogan/types.js.map +1 -1
- package/dist/cjs/stories/slogan.stories.js +1 -1
- package/dist/cjs/stories/slogan.stories.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/types.d.ts +10 -12
- package/dist/esm/stories/slogan.stories.js +2 -2
- package/dist/esm/stories/slogan.stories.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var c=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},n=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of w(e))!v.call(t,p)&&p!==l&&s(t,p,{get:()=>e[p],enumerable:!(o=y(e,p))||o.enumerable});return t};var k=(t,e,l)=>(l=t!=null?c(u(t)):{},n(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),N=t=>n(s({},"__esModule",{value:!0}),t);var h={};D(h,{default:()=>b});module.exports=N(h);var a=require("react/jsx-runtime"),x=k(require("react")),f=require("../../helpers/utils.js"),i=require("../../components/index.js"),d=require("../../shared/Styles.js");const r=x.default.forwardRef(({data:t,className:e},l)=>{const{title:o,features:p}=t;return(0,a.jsxs)("div",{ref:l,className:(0,f.cn)("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",e),children:[(0,a.jsx)(i.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:o}),p&&p.length>0&&(0,a.jsx)("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:p.slice(0,3).map((g,m)=>(0,a.jsxs)(x.default.Fragment,{children:[m>0&&(0,a.jsx)("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(i.Text,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:g.title})})]},m))})]})});r.displayName="Slogan";var b=(0,d.withStyles)(r);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAlBNC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,SACE,QAAC,OACC,IAAKE,EACL,aAAW,MACT,sHACA,8DACA,sEACAD,CACF,EAEA,oBAAC,WACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAE,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,wDACZ,SAAAA,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,OAClC,QAAC,EAAAP,QAAM,SAAN,CACE,UAAAO,EAAQ,MAAK,OAAC,OAAI,UAAU,iCAAiC,KAC9D,OAAC,OAAI,UAAU,SACb,mBAAC,QACC,MAAM,OACN,UAAU,kJACV,KAAMD,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDR,EAAO,YAAc,SAErB,IAAOP,KAAQ,cAAWO,CAAM",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "data", "className", "ref", "title", "features", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var o=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!l.call(t,r)&&r!==s&&i(t,r,{get:()=>e[r],enumerable:!(a=n(e,r))||a.enumerable});return t};var c=t=>o(i({},"__esModule",{value:!0}),t);var f={};module.exports=c(f);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/types.ts"],
|
|
4
|
-
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n
|
|
4
|
+
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface SloganProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var a=Object.defineProperty;var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var f=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},b=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!d.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=s(e,o))||i.enumerable});return t};var p=t=>b(a({},"__esModule",{value:!0}),t);var x={};f(x,{CustomClassName:()=>S,CustomStyle:()=>M,Default:()=>c,SingleFeature:()=>h,TitleOnly:()=>u,TwoFeatures:()=>C,default:()=>m});module.exports=p(x);var n=require("react/jsx-runtime"),N=require("react"),l=require("../biz-components/index.js");const y={title:"Biz Components/Slogan",component:l.Slogan,parameters:{layout:"fullscreen"},tags:["autodocs"]};var m=y;const c={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},u={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},h={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},C={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},S={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},M=()=>(0,n.jsx)(l.Slogan,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GA+FI,IAAAU,EAAA,6BA/FJC,EAAkB,iBAElBC,EAAuB,sCAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,SACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaD,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaL,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,OAEvB,OAAC,UACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["slogan_stories_exports", "__export", "CustomClassName", "CustomStyle", "Default", "SingleFeature", "TitleOnly", "TwoFeatures", "slogan_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_biz_components", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as f,Text as d}from"../../components/index.js";import{withStyles as g}from"../../shared/Styles.js";const a=p.forwardRef(({data:s,className:i},x)=>{const{title:m,features:e}=s;return o("div",{ref:x,className:r("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",i),children:[t(f,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:m}),e&&e.length>0&&t("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:e.slice(0,3).map((n,l)=>o(p.Fragment,{children:[l>0&&t("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),t("div",{className:"flex-1",children:t(d,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:n.title})})]},l))})]})});a.displayName="Slogan";var v=g(a);export{v as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "aAmBM,cAAAA,EAYM,QAAAC,MAZN,oBAlBN,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAASL,EAAM,WAAwC,CAAC,CAAE,KAAAM,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,OACEP,EAAC,OACC,IAAKS,EACL,UAAWP,EACT,sHACA,8DACA,sEACAM,CACF,EAEA,UAAAT,EAACI,EAAA,CACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAO,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BZ,EAAC,OAAI,UAAU,wDACZ,SAAAY,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,IAClCb,EAACC,EAAM,SAAN,CACE,UAAAY,EAAQ,GAAKd,EAAC,OAAI,UAAU,iCAAiC,EAC9DA,EAAC,OAAI,UAAU,SACb,SAAAA,EAACK,EAAA,CACC,MAAM,OACN,UAAU,kJACV,KAAMQ,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDP,EAAO,YAAc,SAErB,IAAOQ,EAAQT,EAAWC,CAAM",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "data", "className", "ref", "title", "features", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{Slogan as e}from"../biz-components/index.js";const t={title:"Biz Components/Slogan",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=t;const n={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},s={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},g={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},d={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},f={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},b=()=>o(e,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -22,5 +22,5 @@ import{jsx as r}from"react/jsx-runtime";import"react";import{Slogan as e}from"..
|
|
|
22
22
|
border-radius: 10px;
|
|
23
23
|
animation: fadeIn 1s ease-in forwards;
|
|
24
24
|
}
|
|
25
|
-
`});export{
|
|
25
|
+
`});export{f as CustomClassName,b as CustomStyle,n as Default,g as SingleFeature,s as TitleOnly,d as TwoFeatures,i as default};
|
|
26
26
|
//# sourceMappingURL=slogan.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "AA+FI,cAAAA,MAAA,oBA/FJ,MAAkB,QAElB,OAAS,UAAAC,MAAc,6BAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaC,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaC,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,IAEvBT,EAACC,EAAA,CACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["jsx", "Slogan", "meta", "slogan_stories_default", "Default", "TitleOnly", "SingleFeature", "TwoFeatures", "CustomClassName", "CustomStyle"]
|
|
7
7
|
}
|