feat: allow styling of font family and letter spacing (#113)

* feat: allow styling of font family

* feat: allow styling of letter spacing

Author: mxschll

pages/chat-bubble/style-permutations.page.tsx

@@ -36,6 +36,8 @@ const styles = [
       paddingBlock: "20px",
       paddingInline: "30px",
       rowGap: "20px",
+      fontFamily: "cursive",
+      letterSpacing: "1px",
     },
   },
 ];

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -257,6 +257,11 @@ Refer to the [style](/components/chat-bubble/?tabId=style) tab for more details.
                   "optional": true,
                   "type": "string",
                 },
+                {
+                  "name": "fontFamily",
+                  "optional": true,
+                  "type": "string",
+                },
                 {
                   "name": "fontSize",
                   "optional": true,
@@ -267,6 +272,11 @@ Refer to the [style](/components/chat-bubble/?tabId=style) tab for more details.
                   "optional": true,
                   "type": "string",
                 },
+                {
+                  "name": "letterSpacing",
+                  "optional": true,
+                  "type": "string",
+                },
                 {
                   "name": "paddingBlock",
                   "optional": true,
@@ -287,7 +297,7 @@ Refer to the [style](/components/chat-bubble/?tabId=style) tab for more details.
             },
             "name": "bubble",
             "optional": true,
-            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; ... 4 more ...; paddingInline?: string | undefined; }",
+            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; ... 6 more ...; paddingInline?: string | undefined; }",
           },
           {
             "inlineType": {

src/chat-bubble/__tests__/__snapshots__/style.test.ts.snap

@@ -9,8 +9,10 @@ exports[`getBubbleStyle > handles all possible style configurations 1`] = `
   "borderWidth": undefined,
   "boxShadow": undefined,
   "color": undefined,
+  "fontFamily": undefined,
   "fontSize": undefined,
   "fontWeight": undefined,
+  "letterSpacing": undefined,
   "paddingBlock": undefined,
   "paddingInline": undefined,
   "rowGap": undefined,
@@ -26,8 +28,10 @@ exports[`getBubbleStyle > handles all possible style configurations 2`] = `
   "borderWidth": undefined,
   "boxShadow": undefined,
   "color": undefined,
+  "fontFamily": undefined,
   "fontSize": undefined,
   "fontWeight": undefined,
+  "letterSpacing": undefined,
   "paddingBlock": undefined,
   "paddingInline": undefined,
   "rowGap": undefined,
@@ -43,8 +47,10 @@ exports[`getBubbleStyle > handles all possible style configurations 3`] = `
   "borderWidth": "2px",
   "boxShadow": "0 4px 8px rgba(0,0,0,0.2)",
   "color": "#333",
+  "fontFamily": "Arial, sans-serif",
   "fontSize": "16px",
   "fontWeight": "500",
+  "letterSpacing": "0.5px",
   "paddingBlock": "20px",
   "paddingInline": "24px",
   "rowGap": "12px",

src/chat-bubble/__tests__/style.test.ts

@@ -19,8 +19,10 @@ const allStyles = {
     borderWidth: "2px",
     boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
     color: "#333",
+    fontFamily: "Arial, sans-serif",
     fontSize: "16px",
     fontWeight: "500",
+    letterSpacing: "0.5px",
     rowGap: "12px",
     paddingBlock: "20px",
     paddingInline: "24px",

src/chat-bubble/interfaces.ts

@@ -53,8 +53,10 @@ export namespace ChatBubbleProps {
       borderWidth?: string;
       boxShadow?: string;
       color?: string;
+      fontFamily?: string;
       fontSize?: string;
       fontWeight?: string;
+      letterSpacing?: string;
       rowGap?: string;
       paddingBlock?: string;
       paddingInline?: string;

src/chat-bubble/style.tsx

@@ -26,8 +26,10 @@ export function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {
     borderWidth: style?.bubble?.borderWidth,
     boxShadow: style?.bubble?.boxShadow,
     color: style?.bubble?.color,
+    fontFamily: style?.bubble?.fontFamily,
     fontSize: style?.bubble?.fontSize,
     fontWeight: style?.bubble?.fontWeight,
+    letterSpacing: style?.bubble?.letterSpacing,
     paddingBlock: style?.bubble?.paddingBlock,
     paddingInline: style?.bubble?.paddingInline,
     rowGap: style?.bubble?.rowGap,