Allow option to preserve whitespace for Typography content (#577)

* add support to Typography for setting white-space css property * Add changeset * remove pre and pre-wrap options
Cambly · Oct 24, 2024 · f6cf4fc · f6cf4fc
1 parent 58f2229
commit f6cf4fc
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 1 deletion.
diff --git a/.changeset/eleven-feet-knock.md b/.changeset/eleven-feet-knock.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Add support to Typography for setting white-space CSS property.
diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
@@ -154,7 +154,7 @@
   text-align: end;
 }
 
-/* Boldness */
+/* Weight */
 
 .regular {
   font-weight: 400;
@@ -212,3 +212,20 @@
 .p500 {
   line-height: 115%;
 }
+
+/* White Space */
+.inherit {
+  white-space: inherit;
+}
+
+.normal {
+  white-space: normal;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.preLine {
+  white-space: pre-line;
+}
diff --git a/packages/syntax-core/src/Typography/Typography.stories.tsx b/packages/syntax-core/src/Typography/Typography.stories.tsx
@@ -23,6 +23,7 @@ export default {
     inline: false,
     lineClamp: 0,
     weight: "regular",
+    whiteSpace: "inherit",
     tooltip: "",
   },
   argTypes: {
@@ -78,6 +79,10 @@ export default {
       options: ["regular", "medium", "semiBold", "bold"],
       control: { type: "radio" },
     },
+    whiteSpace: {
+      options: ["inherit", "normal", "nowrap", "preLine"],
+      control: { type: "radio" },
+    },
   },
   tags: ["autodocs"],
 } as Meta<typeof Typography>;
@@ -238,3 +243,36 @@ export const Weight: StoryObj<typeof Typography> = {
     </>
   ),
 };
+
+const WHITE_SPACE_SAMPLE =
+  "\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh consectetur, posuere massa et, ultricies ipsum. Vivamus id placerat erat. Maecenas eleifend dolor vitae lobortis luctus. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vel maximus metus, a vestibulum elit. In at tellus luctus, blandit quam non, feugiat enim. In gravida blandit venenatis. Pellentesque sit amet suscipit eros. Sed euismod magna gravida eleifend dictum. Phasellus vitae sapien nec massa vestibulum consectetur vitae eget ipsum. Curabitur ut feugiat quam, ut pulvinar est.\n\n\t\t\tFusce gravida eleifend nibh scelerisque facilisis. Aliquam malesuada, magna ac suscipit finibus, enim turpis dignissim nisl, id bibendum sem risus sed mi. Nunc rutrum diam ut risus accumsan, et tristique metus eleifend. Integer placerat placerat orci vitae ullamcorper. Curabitur gravida ante ut ante auctor, et porttitor justo vulputate. Maecenas vitae nisi viverra, volutpat libero at, aliquet ipsum. Etiam fermentum vitae turpis eu placerat. Etiam vulputate tristique ipsum ut efficitur. Nullam non leo eu justo consectetur volutpat dignissim sit amet arcu. Integer nec velit id mauris cursus bibendum at nec nisl. Maecenas imperdiet gravida felis eget laoreet. Suspendisse potenti. Maecenas tincidunt, nisl non finibus ultricies, tellus tellus efficitur neque, a faucibus sapien turpis ac ipsum.\n\n\t\t\tUt ullamcorper lorem varius risus pellentesque pulvinar. Proin mi velit, auctor non quam id, euismod dignissim lacus. Duis a nulla risus. Nullam vestibulum eu lacus non viverra. Sed rhoncus mi nec orci imperdiet, quis euismod magna consequat. Fusce euismod a magna eget mattis. Aliquam convallis interdum neque in commodo. Quisque mattis neque eget metus condimentum pharetra. Maecenas aliquam maximus molestie. Proin scelerisque sodales dui nec mattis. Donec vehicula purus non tristique semper. Phasellus placerat erat ut quam semper gravida. Aliquam ac metus sit amet arcu scelerisque auctor. Vestibulum gravida mauris id metus viverra pulvinar. Vestibulum tincidunt lobortis vulputate.";
+
+export const WhiteSpaceNormal: StoryObj<typeof Typography> = {
+  render: (args) => (
+    <>
+      <Typography {...args} whiteSpace="normal">
+        {WHITE_SPACE_SAMPLE}
+      </Typography>
+    </>
+  ),
+};
+
+export const WhiteSpaceNowrap: StoryObj<typeof Typography> = {
+  render: (args) => (
+    <>
+      <Typography {...args} whiteSpace="nowrap">
+        {WHITE_SPACE_SAMPLE}
+      </Typography>
+    </>
+  ),
+};
+
+export const WhiteSpacePreLine: StoryObj<typeof Typography> = {
+  render: (args) => (
+    <>
+      <Typography {...args} whiteSpace="preLine">
+        {WHITE_SPACE_SAMPLE}
+      </Typography>
+    </>
+  ),
+};
diff --git a/packages/syntax-core/src/Typography/Typography.tsx b/packages/syntax-core/src/Typography/Typography.tsx
@@ -127,6 +127,14 @@ const Typography = forwardRef<
      * @defaultValue "regular"
      */
     weight?: "regular" | "medium" | "semiBold" | "bold";
+    /**
+     * Controls how whitespace within the element is handled.
+     *
+     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+     *
+     * @defaultValue "inherit"
+     */
+    whiteSpace?: "inherit" | "normal" | "nowrap" | "preLine";
   }
 >(function Typography(
   {
@@ -144,6 +152,7 @@ const Typography = forwardRef<
     transform = "none",
     underline = false,
     weight = "regular",
+    whiteSpace = "inherit",
   },
   ref,
 ): ReactElement {
@@ -156,6 +165,7 @@ const Typography = forwardRef<
         styles.typography,
         styles[align],
         styles[weight],
+        styles[whiteSpace],
         fontStyle === "serif" ? styles.serif : styles.sansSerif,
         textColor(color),
         inline && styles.inline,