@madie/madie-design-system 1.2.39 → 1.2.40

package/components/TruncateText/TruncateText.stories.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { withKnobs } from "@storybook/addon-knobs";
+import TruncateText from "./index";
+
+export default {
+    title: "Truncate Text",
+    component: TruncateText,
+    decorators: [withKnobs],
+};
+
+export const FullText = () => (
+    <TruncateText
+        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing"
+        maxLength={120}
+        dataTestId={"measure-comments"}
+    />
+);
+export const TruncatedText = () => (
+    <TruncateText
+        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain"
+        maxLength={60}
+        dataTestId={"measure-comments"}
+        fontSize="1rem"
+    />
+);

package/components/TruncateText/index.js

@@ -0,0 +1,52 @@
+import { IconButton } from "@mui/material";
+import React, { useState } from "react";
+import _ from "lodash";
+import PropTypes from "prop-types";
+
+const TruncateText = ({
+    text,
+    maxLength = 120,
+    dataTestId,
+    fontSize = "1rem",
+}) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    if (!text || _.trim(text) === "") {
+        return null;
+    }
+
+    const toggleExpanded = () => setIsExpanded((prev) => !prev);
+
+    const displayedText = isExpanded ? text : _.slice(text, 0, maxLength);
+
+    return (
+        <div data-testid={`${dataTestId}-content`} style={{ fontSize }}>
+            <span>{displayedText}</span>
+            {text.length > maxLength && (
+                <IconButton
+                    onClick={toggleExpanded}
+                    data-testid={`${dataTestId}-toggle-button`}
+                    color="primary"
+                    sx={{
+                        marginLeft: "5px",
+                        padding: "0",
+                        cursor: "pointer",
+                        textDecoration: "underline",
+                        fontSize: "inherit",
+                    }}
+                >
+                    {isExpanded ? "Show less" : "Show more"}
+                </IconButton>
+            )}
+        </div>
+    );
+};
+
+TruncateText.propTypes = {
+    text: PropTypes.string,
+    maxLength: PropTypes.number,
+    dataTestId: PropTypes.string,
+    fontSize: PropTypes.string,
+};
+
+export default TruncateText;

package/components/index.js

@@ -41,6 +41,7 @@ import TextInput from "./TextInput";
 import Dropdown from "./Dropdown";
 import DSLink from "./Link";
 import NumberInput from "./NumberInput";
+import TruncateText from "./TruncateText/index";
 import {
     MyApplicationsIcon,
     UserSignInIcon,
@@ -169,4 +170,5 @@ export {
     Dropdown,
     Tooltip,
     DSLink,
+    TruncateText,
 };