fix button text not wrapping

.ladle/config.mjs

@@ -3,4 +3,13 @@ export default {
   outDir: 'docs',
   mode: 'preview',
   viteConfig: '.ladle/vite.config.ts',
+  addons: {
+    width: {
+      options: {
+        narrow: 320,
+        medium: 720,
+        large: 1200
+      },
+    }
+  }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.23.9",
+  "version": "1.23.10",
   "license": "MIT",
   "os": [ "darwin", "linux" ],
   "repository": "https://github.com/openstax/ui-components.git",
@@ -70,7 +70,6 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^3.0.0",
     "@types/jest": "^28.1.4",
     "@types/node": "^18.7.5",
     "@types/node-fetch": "^2.6.2",

src/components/Button.css

@@ -8,15 +8,15 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  height: 4rem;
+  min-height: 4rem;
   padding: 0 3rem;
   border: 0;
   border-radius: 0.5rem;
   box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease-in-out;
   text-decoration: none;
   user-select: none;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 
   /* Variant-specific styles using CSS custom properties with fallback defaults (primary variant) */
   background-color: var(--button-bg, #d4450c);

src/components/Button.stories.tsx

@@ -1,10 +1,23 @@
-import { Button, LinkButton, ButtonLink } from "./Button";
+import React from 'react';
+import { Button, LinkButton, ButtonLink } from './Button';
+import { Input } from 'react-aria-components';
 
-export const Primary = () => <>
-  <Button>Primary</Button>
-  <Button disabled>Disabled</Button>
-  <Button isWaiting={true} waitingText='Waiting...'>Button</Button>
-</>;
+export const Primary = () => {
+  const [state, setState] = React.useState('Primary');
+
+  return (
+    <>
+      <Input aria-label="Button text" value={state} onChange={e => setState(e.target.value)} />
+      <br />
+      <br />
+      <Button>{state}</Button>
+      <Button disabled>Disabled</Button>
+      <Button isWaiting={true} waitingText="Waiting...">
+        Button
+      </Button>
+    </>
+  );
+};
 
 export const Light = () => <>
   <Button variant='light'>Light</Button>