@anker-in/headless-ui 0.0.27-alpha.94 → 0.0.27-alpha.96
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/components/heading.d.ts +1 -1
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/text.d.ts +1 -1
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/stories/heading.stories.d.ts +1 -1
- package/dist/cjs/stories/heading.stories.js +12 -1
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/cjs/stories/text.stories.d.ts +2 -2
- package/dist/cjs/stories/text.stories.js +10 -1
- package/dist/cjs/stories/text.stories.js.map +3 -3
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/text.d.ts +1 -1
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/stories/heading.stories.d.ts +1 -1
- package/dist/esm/stories/heading.stories.js +12 -1
- package/dist/esm/stories/heading.stories.js.map +2 -2
- package/dist/esm/stories/text.stories.d.ts +2 -2
- package/dist/esm/stories/text.stories.js +11 -2
- package/dist/esm/stories/text.stories.js.map +3 -3
- package/dist/tokens/base.css +5 -3
- package/package.json +1 -1
- package/style.css +11 -6
- package/tailwind.config.js +13 -6
|
@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
declare const headingVariants: (props?: ({
|
|
5
|
-
size?: 1 | 2 | 3 | 4 | 5 | null | undefined;
|
|
5
|
+
size?: 1 | "none" | 2 | 3 | 4 | 5 | null | undefined;
|
|
6
6
|
weight?: "bold" | "medium" | "semibold" | "black" | "extraBold" | null | undefined;
|
|
7
7
|
align?: "left" | "right" | "center" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},g=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of R(e))!L.call(t,a)&&a!==o&&l(t,a,{get:()=>e[a],enumerable:!(i=z(e,a))||i.enumerable});return t};var T=(t,e,o)=>(o=t!=null?u(E(t)):{},g(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),V=t=>g(l({},"__esModule",{value:!0}),t);var C={};N(C,{Heading:()=>r});module.exports=V(C);var d=require("react/jsx-runtime"),h=require("../helpers/index.js"),x=require("@radix-ui/react-slot"),m=require("class-variance-authority"),c=T(require("react")),f=require("@payloadcms/richtext-lexical/html");const w=(0,m.cva)("
|
|
1
|
+
"use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},g=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of R(e))!L.call(t,a)&&a!==o&&l(t,a,{get:()=>e[a],enumerable:!(i=z(e,a))||i.enumerable});return t};var T=(t,e,o)=>(o=t!=null?u(E(t)):{},g(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),V=t=>g(l({},"__esModule",{value:!0}),t);var C={};N(C,{Heading:()=>r});module.exports=V(C);var d=require("react/jsx-runtime"),h=require("../helpers/index.js"),x=require("@radix-ui/react-slot"),m=require("class-variance-authority"),c=T(require("react")),f=require("@payloadcms/richtext-lexical/html");const w=(0,m.cva)("leading-tight",{variants:{size:{none:"tracking",1:"text-heading-1 lg-desktop:text-[16px]",2:"text-heading-2 lg-desktop:text-[24px]",3:"text-heading-3 lg-desktop:text-[32px]",4:"text-heading-4 desktop:text-[36px] lg-desktop:text-[48px]",5:"text-heading-5 desktop:text-[48px] lg-desktop:text-[64px]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),r=c.default.forwardRef((t,e)=>{const{children:o,className:i,size:a="none",align:k,weight:y,asChild:b,as:H="h1",color:s,html:n,...P}=t,p=n?{dangerouslySetInnerHTML:{__html:typeof n=="string"?n:(0,f.convertLexicalToHTML)({data:n})}}:null,S=s?{style:{color:s}}:null;return(0,d.jsx)(x.Slot,{...P,ref:e,className:(0,h.cn)(w({size:a,weight:y,align:k}),i),...p,...S,children:b?o:(0,d.jsx)(H,{children:p?null:o})})});r.displayName="Heading";
|
|
2
2
|
//# sourceMappingURL=heading.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/heading.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-heading-1 lg-desktop:text-[16px]',\n 2: 'text-heading-2 lg-desktop:text-[24px]',\n 3: 'text-heading-3 lg-desktop:text-[32px]',\n 4: 'text-heading-4 desktop:text-[36px] lg-desktop:text-[48px]',\n 5: 'text-heading-5 desktop:text-[48px] lg-desktop:text-[64px]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuF4B,IAAAI,EAAA,6BAvF5BC,EAAmB,+BACnBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAkB,oBAClBC,EAAqC,6CAGrC,MAAMC,KAAkB,OAAI,gBAAiB,CAC3C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,wCACH,EAAG,wCACH,EAAG,wCACH,EAAG,4DACH,EAAG,2DACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKR,EAAU,EAAAS,QAAM,WAAyC,CAACC,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTH,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDZ,EAAQ,YAAc",
|
|
6
6
|
"names": ["heading_exports", "__export", "Heading", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react_slot", "import_class_variance_authority", "import_react", "import_html", "headingVariants", "React", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
5
5
|
declare const textVariants: (props?: ({
|
|
6
|
-
size?: 1 | 2 | 3 | null | undefined;
|
|
6
|
+
size?: 1 | "none" | 2 | 3 | 4 | null | undefined;
|
|
7
7
|
weight?: "bold" | "light" | "normal" | "medium" | "semibold" | null | undefined;
|
|
8
8
|
align?: "left" | "right" | "center" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var b=Object.create;var
|
|
1
|
+
"use strict";var b=Object.create;var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of C(e))!z.call(t,r)&&r!==o&&p(t,r,{get:()=>e[r],enumerable:!(n=S(e,r))||n.enumerable});return t};var E=(t,e,o)=>(o=t!=null?b(R(t)):{},x(e||!t||!t.__esModule?p(o,"default",{value:t,enumerable:!0}):o,t)),N=t=>x(p({},"__esModule",{value:!0}),t);var w={};L(w,{Text:()=>a});module.exports=N(w);var i=require("react/jsx-runtime"),V=E(require("react")),d=require("@radix-ui/react-slot"),P=require("class-variance-authority"),c=require("@payloadcms/richtext-lexical/html"),f=require("../helpers/index.js");const W=(0,P.cva)("font-heading",{variants:{size:{none:"tracking",1:"text-text-1",2:"text-text-2",3:"text-text-3",4:"text-text-4"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),a=V.forwardRef((t,e)=>{const{children:o,size:n="none",weight:r,align:T,className:h,asChild:g,as:y="span",color:l,html:s,...v}=t,m=s?{dangerouslySetInnerHTML:{__html:typeof s=="string"?s:(0,c.convertLexicalToHTML)({data:s})}}:null,u=l?{style:{color:l}}:null;return(0,i.jsx)(d.Slot,{...v,ref:e,className:(0,f.cn)(W({size:n,weight:r,align:T}),h),...m,...u,children:g?o:(0,i.jsx)(y,{children:m?null:o})})});a.displayName="Text";
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('font-heading', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n 4: 'text-text-4',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,eAAgB,CACvC,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAAC,EACA,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
|
|
6
6
|
"names": ["text_exports", "__export", "Text", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_class_variance_authority", "import_html", "import_helpers", "textVariants", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var c=(r,o)=>{for(var a in o)i(r,a,{get:o[a],enumerable:!0})},m=(r,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of p(o))!d.call(r,n)&&n!==a&&i(r,n,{get:()=>o[n],enumerable:!(s=l(o,n))||s.enumerable});return r};var y=r=>m(i({},"__esModule",{value:!0}),r);var b={};c(b,{All:()=>u,Default:()=>g,Html:()=>f,default:()=>x});module.exports=y(b);var e=require("react/jsx-runtime"),t=require("../components/index.js"),v=require("react");const h={title:"Typography/Heading",component:t.Heading,parameters:{layout:"padded",docs:{description:{component:`Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002
|
|
2
|
+
|
|
3
|
+
### \u6807\u9898\u5C3A\u5BF8
|
|
4
|
+
\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px,
|
|
5
|
+
\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A
|
|
6
|
+
- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)
|
|
7
|
+
- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)
|
|
8
|
+
- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)
|
|
9
|
+
- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)
|
|
10
|
+
- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)
|
|
11
|
+
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
12
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var x=h;const g={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},u={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:4,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},f={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};
|
|
2
13
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAmGI,IAAAO,EAAA,6BAjGJC,EAAwB,kCACxBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,UACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,CAAC,EAC/B,YAAa,sFACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOL,EAAQK,EAIR,MAAMP,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaD,EAAa,CACxB,OAAQ,OACN,oBACE,oBAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ,EAEaE,EAAc,CACzB,OAAQ,OACN,oBACE,oBAAC,WAAQ,KAAM,EAAG,sGAAmC,KACrD,OAAC,OAAG,KACJ,OAAC,WAAQ,KAAM,EAAG,KAAK,mFAAmF,KAC1G,OAAC,OAAG,KACJ,OAAC,WACC,KAAM,EACN,KACE,CACE,KAAM,CACJ,KAAM,OACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,0BACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,EACA,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,SACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ",
|
|
6
6
|
"names": ["heading_stories_exports", "__export", "All", "Default", "Html", "heading_stories_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ declare const meta: {
|
|
|
18
18
|
type: "select";
|
|
19
19
|
};
|
|
20
20
|
description: string;
|
|
21
|
-
options: number[];
|
|
21
|
+
options: (string | number)[];
|
|
22
22
|
table: {
|
|
23
23
|
defaultValue: {
|
|
24
24
|
summary: string;
|
|
@@ -80,6 +80,6 @@ declare const meta: {
|
|
|
80
80
|
export default meta;
|
|
81
81
|
type Story = StoryObj<typeof meta>;
|
|
82
82
|
export declare const Default: Story;
|
|
83
|
-
export declare const
|
|
83
|
+
export declare const All: Story;
|
|
84
84
|
export declare const weight: Story;
|
|
85
85
|
export declare const Html: Story;
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(r,o)=>{for(var l in o)i(r,l,{get:o[l],enumerable:!0})},c=(r,o,l,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of p(o))!d.call(r,n)&&n!==l&&i(r,n,{get:()=>o[n],enumerable:!(a=s(o,n))||a.enumerable});return r};var f=r=>c(i({},"__esModule",{value:!0}),r);var T={};m(T,{All:()=>x,Default:()=>u,Html:()=>b,default:()=>y,weight:()=>g});module.exports=f(T);var e=require("react/jsx-runtime"),t=require("../components/index.js"),w=require("react");const h={title:"Typography/Text",component:t.Text,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
|
+
|
|
3
|
+
### \u6587\u672C\u5C3A\u5BF8
|
|
4
|
+
\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px
|
|
5
|
+
- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)
|
|
6
|
+
- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)
|
|
7
|
+
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
|
+
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
|
+
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
10
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var y=h;const u={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},x={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},g={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},b={render(){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Text,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Text,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
2
11
|
to right,
|
|
3
12
|
#00ff00, /* \u7EFF\u8272 */
|
|
4
13
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["text_stories_exports", "__export", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'normal',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'normal',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"semibold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <>\n <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n <hr />\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n <hr />\n <Text\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h3',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'Reserve for Only $1, Get $70 Off',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["text_stories_exports", "__export", "All", "Default", "Html", "text_stories_default", "weight", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
declare const headingVariants: (props?: ({
|
|
5
|
-
size?: 1 | 2 | 3 | 4 | 5 | null | undefined;
|
|
5
|
+
size?: 1 | "none" | 2 | 3 | 4 | 5 | null | undefined;
|
|
6
6
|
weight?: "bold" | "medium" | "semibold" | "black" | "extraBold" | null | undefined;
|
|
7
7
|
align?: "left" | "right" | "center" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("leading-tight",{variants:{size:{none:"tracking",1:"text-heading-1 lg-desktop:text-[16px]",2:"text-heading-2 lg-desktop:text-[24px]",3:"text-heading-3 lg-desktop:text-[32px]",4:"text-heading-4 desktop:text-[36px] lg-desktop:text-[48px]",5:"text-heading-5 desktop:text-[48px] lg-desktop:text-[64px]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),i=b.forwardRef((l,r)=>{const{children:e,className:d,size:s="none",align:p,weight:g,asChild:h,as:x="h1",color:o,html:t,...m}=l,a=t?{dangerouslySetInnerHTML:{__html:typeof t=="string"?t:H({data:t})}}:null,c=o?{style:{color:o}}:null;return n(k,{...m,ref:r,className:f(P({size:s,weight:g,align:p}),d),...a,...c,children:h?e:n(x,{children:a?null:e})})});i.displayName="Heading";export{i as Heading};
|
|
2
2
|
//# sourceMappingURL=heading.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/heading.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-heading-1 lg-desktop:text-[16px]',\n 2: 'text-heading-2 lg-desktop:text-[24px]',\n 3: 'text-heading-3 lg-desktop:text-[32px]',\n 4: 'text-heading-4 desktop:text-[36px] lg-desktop:text-[48px]',\n 5: 'text-heading-5 desktop:text-[48px] lg-desktop:text-[64px]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
|
|
5
|
+
"mappings": "AAuF4B,cAAAA,MAAA,oBAvF5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,gBAAiB,CAC3C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,wCACH,EAAG,wCACH,EAAG,wCACH,EAAG,4DACH,EAAG,2DACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKI,EAAUH,EAAM,WAAyC,CAACI,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOb,EAAqB,CAAE,KAAMa,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWR,EACTK,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDH,EAAQ,YAAc",
|
|
6
6
|
"names": ["jsx", "cn", "Slot", "cva", "React", "convertLexicalToHTML", "headingVariants", "Heading", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
5
5
|
declare const textVariants: (props?: ({
|
|
6
|
-
size?: 1 | 2 | 3 | null | undefined;
|
|
6
|
+
size?: 1 | "none" | 2 | 3 | 4 | null | undefined;
|
|
7
7
|
weight?: "bold" | "light" | "normal" | "medium" | "semibold" | null | undefined;
|
|
8
8
|
align?: "left" | "right" | "center" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as s}from"react/jsx-runtime";import*as T from"react";import{Slot as h}from"@radix-ui/react-slot";import{cva as g}from"class-variance-authority";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{cn as v}from"../helpers/index.js";const u=g("font-heading",{variants:{size:{none:"tracking",1:"text-text-1",2:"text-text-2",3:"text-text-3",4:"text-text-4"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),n=T.forwardRef((p,a)=>{const{children:e,size:i="none",weight:l,align:m,className:x,asChild:d,as:P="span",color:o,html:t,...c}=p,r=t?{dangerouslySetInnerHTML:{__html:typeof t=="string"?t:y({data:t})}}:null,f=o?{style:{color:o}}:null;return s(h,{...c,ref:a,className:v(u({size:i,weight:l,align:m}),x),...r,...f,children:d?e:s(P,{children:r?null:e})})});n.displayName="Text";export{n as Text};
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('font-heading', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n 4: 'text-text-4',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,eAAgB,CACvC,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAAC,EACA,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
|
|
6
6
|
"names": ["jsx", "React", "Slot", "cva", "convertLexicalToHTML", "cn", "textVariants", "Text", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading as t}from"../components/index.js";import"react";const
|
|
1
|
+
import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading as t}from"../components/index.js";import"react";const n={title:"Typography/Heading",component:t,parameters:{layout:"padded",docs:{description:{component:`Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002
|
|
2
|
+
|
|
3
|
+
### \u6807\u9898\u5C3A\u5BF8
|
|
4
|
+
\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px,
|
|
5
|
+
\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A
|
|
6
|
+
- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)
|
|
7
|
+
- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)
|
|
8
|
+
- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)
|
|
9
|
+
- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)
|
|
10
|
+
- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)
|
|
11
|
+
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
12
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var l=n;const p={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},d={render:()=>r(o,{children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},c={render:()=>r(o,{children:[e(t,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),e("hr",{}),e(t,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};export{d as All,p as Default,c as Html,l as default};
|
|
2
13
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "AAmGI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAjGJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,CAAC,EAC/B,YAAa,sFACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ,EAEaK,EAAc,CACzB,OAAQ,IACNN,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,sGAAmC,EACrDF,EAAC,OAAG,EACJA,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAK,mFAAmF,EAC1GF,EAAC,OAAG,EACJA,EAACE,EAAA,CACC,KAAM,EACN,KACE,CACE,KAAM,CACJ,KAAM,OACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,0BACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,EACA,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,SACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Heading", "meta", "heading_stories_default", "Default", "All", "Html"]
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ declare const meta: {
|
|
|
18
18
|
type: "select";
|
|
19
19
|
};
|
|
20
20
|
description: string;
|
|
21
|
-
options: number[];
|
|
21
|
+
options: (string | number)[];
|
|
22
22
|
table: {
|
|
23
23
|
defaultValue: {
|
|
24
24
|
summary: string;
|
|
@@ -80,6 +80,6 @@ declare const meta: {
|
|
|
80
80
|
export default meta;
|
|
81
81
|
type Story = StoryObj<typeof meta>;
|
|
82
82
|
export declare const Default: Story;
|
|
83
|
-
export declare const
|
|
83
|
+
export declare const All: Story;
|
|
84
84
|
export declare const weight: Story;
|
|
85
85
|
export declare const Html: Story;
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t}from"../components/index.js";import"react";const r={title:"Typography/Text",component:t,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
|
+
|
|
3
|
+
### \u6587\u672C\u5C3A\u5BF8
|
|
4
|
+
\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px
|
|
5
|
+
- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)
|
|
6
|
+
- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)
|
|
7
|
+
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
|
+
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
|
+
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
10
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var s=r;const p={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},d={render(){return o("div",{className:"flex flex-col",children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},m={render(){return o("div",{className:"flex flex-col",children:[e(t,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},c={render(){return o(n,{children:[e(t,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
2
11
|
to right,
|
|
3
12
|
#00ff00, /* \u7EFF\u8272 */
|
|
4
13
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -6,5 +15,5 @@ import{Fragment as l,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t
|
|
|
6
15
|
#0099ff, /* \u6D45\u84DD\u8272 */
|
|
7
16
|
#8000ff, /* \u7D2B\u8272 */
|
|
8
17
|
#ff00ff /* \u7C89\u8272 */
|
|
9
|
-
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{d as
|
|
18
|
+
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{d as All,p as Default,c as Html,s as default,m as weight};
|
|
10
19
|
//# sourceMappingURL=text.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'normal',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'normal',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"semibold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <>\n <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n <hr />\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n <hr />\n <Text\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h3',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'Reserve for Only $1, Get $70 Off',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "All", "weight", "Html"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
|
@@ -71,10 +71,12 @@
|
|
|
71
71
|
|
|
72
72
|
--size-text-1: 12px;
|
|
73
73
|
--size-text-2: 14px;
|
|
74
|
-
--size-text-3:
|
|
74
|
+
--size-text-3: 16px;
|
|
75
|
+
--size-text-4: 18px;
|
|
75
76
|
--letter-spacing-text-1: -0.24px;
|
|
76
|
-
--letter-spacing-text-2: -0.
|
|
77
|
-
--letter-spacing-text-3: -0.
|
|
77
|
+
--letter-spacing-text-2: -0.28px;
|
|
78
|
+
--letter-spacing-text-3: -0.32px;
|
|
79
|
+
--letter-spacing-text-4: -0.36px;
|
|
78
80
|
|
|
79
81
|
--size-heading-1: 24px;
|
|
80
82
|
--size-heading-2: 32px;
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1305,27 +1305,27 @@ video {
|
|
|
1305
1305
|
.text-heading-1 {
|
|
1306
1306
|
font-size: 14px;
|
|
1307
1307
|
line-height: 120%;
|
|
1308
|
-
letter-spacing: -
|
|
1308
|
+
letter-spacing: var(--letter-spacing-heading-1);
|
|
1309
1309
|
}
|
|
1310
1310
|
.text-heading-2 {
|
|
1311
1311
|
font-size: 20px;
|
|
1312
1312
|
line-height: 120%;
|
|
1313
|
-
letter-spacing: -
|
|
1313
|
+
letter-spacing: var(--letter-spacing-heading-2);
|
|
1314
1314
|
}
|
|
1315
1315
|
.text-heading-3 {
|
|
1316
1316
|
font-size: 24px;
|
|
1317
1317
|
line-height: 120%;
|
|
1318
|
-
letter-spacing: -
|
|
1318
|
+
letter-spacing: var(--letter-spacing-heading-3);
|
|
1319
1319
|
}
|
|
1320
1320
|
.text-heading-4 {
|
|
1321
1321
|
font-size: 32px;
|
|
1322
1322
|
line-height: 100%;
|
|
1323
|
-
letter-spacing: -
|
|
1323
|
+
letter-spacing: var(--letter-spacing-heading-4);
|
|
1324
1324
|
}
|
|
1325
1325
|
.text-heading-5 {
|
|
1326
1326
|
font-size: 40px;
|
|
1327
1327
|
line-height: 100%;
|
|
1328
|
-
letter-spacing: -
|
|
1328
|
+
letter-spacing: var(--letter-spacing-heading-5);
|
|
1329
1329
|
}
|
|
1330
1330
|
.text-lg {
|
|
1331
1331
|
font-size: 1.125rem;
|
|
@@ -1343,13 +1343,18 @@ video {
|
|
|
1343
1343
|
.text-text-2 {
|
|
1344
1344
|
font-size: var(--size-text-2);
|
|
1345
1345
|
line-height: var(--line-height-normal);
|
|
1346
|
-
letter-spacing: var(--letter-spacing-text-
|
|
1346
|
+
letter-spacing: var(--letter-spacing-text-2);
|
|
1347
1347
|
}
|
|
1348
1348
|
.text-text-3 {
|
|
1349
1349
|
font-size: var(--size-text-3);
|
|
1350
1350
|
line-height: var(--line-height-normal);
|
|
1351
1351
|
letter-spacing: var(--letter-spacing-text-3);
|
|
1352
1352
|
}
|
|
1353
|
+
.text-text-4 {
|
|
1354
|
+
font-size: var(--size-text-4);
|
|
1355
|
+
line-height: var(--line-height-normal);
|
|
1356
|
+
letter-spacing: var(--letter-spacing-text-4);
|
|
1357
|
+
}
|
|
1353
1358
|
.text-xs {
|
|
1354
1359
|
font-size: 0.75rem;
|
|
1355
1360
|
line-height: 1rem;
|
package/tailwind.config.js
CHANGED
|
@@ -168,7 +168,7 @@ module.exports = {
|
|
|
168
168
|
'var(--size-text-2)',
|
|
169
169
|
{
|
|
170
170
|
lineHeight: 'var(--line-height-normal)',
|
|
171
|
-
letterSpacing: 'var(--letter-spacing-text-
|
|
171
|
+
letterSpacing: 'var(--letter-spacing-text-2)',
|
|
172
172
|
},
|
|
173
173
|
],
|
|
174
174
|
'text-3': [
|
|
@@ -178,39 +178,46 @@ module.exports = {
|
|
|
178
178
|
letterSpacing: 'var(--letter-spacing-text-3)',
|
|
179
179
|
},
|
|
180
180
|
],
|
|
181
|
+
'text-4': [
|
|
182
|
+
'var(--size-text-4)',
|
|
183
|
+
{
|
|
184
|
+
lineHeight: 'var(--line-height-normal)',
|
|
185
|
+
letterSpacing: 'var(--letter-spacing-text-4)',
|
|
186
|
+
},
|
|
187
|
+
],
|
|
181
188
|
'heading-1': [
|
|
182
189
|
'14px',
|
|
183
190
|
{
|
|
184
191
|
lineHeight: '120%',
|
|
185
|
-
letterSpacing: '-
|
|
192
|
+
letterSpacing: 'var(--letter-spacing-heading-1)',
|
|
186
193
|
},
|
|
187
194
|
],
|
|
188
195
|
'heading-2': [
|
|
189
196
|
'20px',
|
|
190
197
|
{
|
|
191
198
|
lineHeight: '120%',
|
|
192
|
-
letterSpacing: '-
|
|
199
|
+
letterSpacing: 'var(--letter-spacing-heading-2)',
|
|
193
200
|
},
|
|
194
201
|
],
|
|
195
202
|
'heading-3': [
|
|
196
203
|
'24px',
|
|
197
204
|
{
|
|
198
205
|
lineHeight: '120%',
|
|
199
|
-
letterSpacing: '-
|
|
206
|
+
letterSpacing: 'var(--letter-spacing-heading-3)',
|
|
200
207
|
},
|
|
201
208
|
],
|
|
202
209
|
'heading-4': [
|
|
203
210
|
'32px',
|
|
204
211
|
{
|
|
205
212
|
lineHeight: '100%',
|
|
206
|
-
letterSpacing: '-
|
|
213
|
+
letterSpacing: 'var(--letter-spacing-heading-4)',
|
|
207
214
|
},
|
|
208
215
|
],
|
|
209
216
|
'heading-5': [
|
|
210
217
|
'40px',
|
|
211
218
|
{
|
|
212
219
|
lineHeight: '100%',
|
|
213
|
-
letterSpacing: '-
|
|
220
|
+
letterSpacing: 'var(--letter-spacing-heading-5)',
|
|
214
221
|
},
|
|
215
222
|
],
|
|
216
223
|
},
|