feat(Text): add text-wrap support via textWrap prop (#1776)

## 📝 Changes

- Adds `textWrap` prop to `Text` component:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

Specifically, found need in product for specifying `text-wrap: balance`.

## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [x] Visuals match Design Specs in Figma
- [x] Stories accompany any component changes
- [x] Code is in accordance with our style guide
- [x] Design tokens are utilized
- [x] Unit tests accompany any component changes
- ~[ ] TSDoc is written for any API surface area~
- ~[ ] Specs are up-to-date~
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.

Author: stephenjwatkins

.changeset/green-horses-trade.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+feat(Text): add text-wrap support via textWrap prop

easy-ui-react/src/Text/Text.module.scss

@@ -114,3 +114,23 @@
 .fontVariantNumericTabular-nums {
   font-variant-numeric: tabular-nums;
 }
+
+.textWrapWrap {
+  text-wrap: wrap;
+}
+
+.textWrapNoWrap {
+  text-wrap: nowrap;
+}
+
+.textWrapBalance {
+  text-wrap: balance;
+}
+
+.textWrapPretty {
+  text-wrap: pretty;
+}
+
+.textWrapStable {
+  text-wrap: stable;
+}

easy-ui-react/src/Text/Text.stories.tsx

@@ -73,3 +73,25 @@ export const WhiteSpace: Story = {
     },
   },
 };
+
+export const TextWrap: Story = {
+  render: Template.bind({}),
+  args: {
+    as: "p",
+    variant: "body1",
+    textWrap: "balance",
+    children: (
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt
+        vel lorem nec pretium. Vestibulum ante ipsum primis in faucibus orci
+        luctus et ultrices posuere cubilia curae; Morbi sollicitudin ex nec
+        imperdiet pellentesque.
+      </>
+    ),
+  },
+  parameters: {
+    controls: {
+      include: ["textWrap"],
+    },
+  },
+};

easy-ui-react/src/Text/Text.test.tsx

@@ -103,4 +103,12 @@ describe("<Text />", () => {
       expect.stringContaining("whiteSpacePre-line"),
     );
   });
+
+  it("should apply textWrap", () => {
+    render(<Text textWrap="balance">Here is some text</Text>);
+    expect(screen.getByText("Here is some text")).toHaveAttribute(
+      "class",
+      expect.stringContaining("textWrapBalance"),
+    );
+  });
 });

easy-ui-react/src/Text/Text.tsx

@@ -40,6 +40,7 @@ export type TextWhiteSpace =
   | "pre-wrap"
   | "break-spaces"
   | "pre-line";
+export type TextWrap = "wrap" | "nowrap" | "balance" | "pretty" | "stable";
 export type FontVariantNumeric = "normal" | "tabular-nums";
 
 export type TextProps = {
@@ -59,6 +60,8 @@ export type TextProps = {
   id?: string;
   /** HTML role attribute */
   role?: HTMLAttributes<"span">["role"];
+  /** Specify wrapping behavior */
+  textWrap?: TextWrap;
   /** Transform text */
   transform?: TextTransform;
   /** Truncate text overflow with ellipsis */
@@ -122,6 +125,7 @@ export function Text({
   color,
   fontVariantNumeric,
   id,
+  textWrap,
   transform = "none",
   truncate = false,
   variant,
@@ -138,6 +142,7 @@ export function Text({
     breakWord && styles.break,
     truncate && styles.truncate,
     visuallyHidden && styles.visuallyHidden,
+    textWrap && styles[variationName("textWrap", textWrap)],
     transform && styles[variationName("transform", transform)],
     whiteSpace && styles[variationName("whiteSpace", whiteSpace)],
     fontVariantNumeric &&