feat(components): add margin to text

bootwindui · Nov 12, 2023 · 6109834 · 6109834
1 parent d2d597d
commit 6109834
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/packages/typography/src/text.tsx b/packages/typography/src/text.tsx
@@ -8,7 +8,12 @@ type TextStyle = Record<TextType, {
     size: number,
     color: string
   },
-  styles: { fontSize: string, lineHeight: string, letterSpacing: string }[]
+  styles: { 
+    fontSize: string
+    lineHeight: string
+    letterSpacing: string
+    mb?: string
+  }[]
 }>
 const styleMap: TextStyle  = {
   "display": {
@@ -18,10 +23,10 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[3.5px]" },
-      { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[3.5px]" },
-      { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[3.5px]" },
-      { fontSize: "text-[6rem]", lineHeight: "leading-[6.87rem]", letterSpacing: "tracking-[2.5px]" },
+      { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[6rem]", lineHeight: "leading-[6.87rem]", letterSpacing: "tracking-[2.5px]", mb: 'mb-5' },
     ]
   },
   "headline": {
@@ -31,12 +36,12 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[2.3px]" },
-      { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[2.3px]" },
-      { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[2.3px]" },
-      { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[1px]" },
-      { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[0.5px]" },
-      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.4px]" },
+      { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[1px]", mb: 'mb-3' },
+      { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[0.5px]", mb: 'mb-3' },
+      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.4px]", mb: 'mb-3' },
     ]
   },
   "short-desc": {
@@ -59,12 +64,12 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[0.3px]" },
-      { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[0.3px]" },
-      { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[0.3px]" },
-      { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[0.3px]" },
-      { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[0.2px]" },
-      { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[0.2px]" },
+      { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' },
+      { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' },
     ]
   },
 }
@@ -89,7 +94,7 @@ const Text: React.FC<TextProps> = ({
   const styles = Object.values(styleMap[type].styles[size-1]).join(' ')
   const additionalClasses = [
     `bootwind-text bootwind-text-${type}`, 
-    italic ? 'italic' : '',,
+    italic ? 'italic' : '',
     weight,
     color
   ].join(' ')