@madie/madie-design-system 1.2.95 → 1.2.97

package/test/components/TextField.test.js

@@ -178,4 +178,49 @@ describe("TextField", () => {
             expect(maxLength).toBeInTheDocument();
         });
     });
+
+    test("recommendation text and max length share a row with left/right layout", async () => {
+        act(async () => {
+            const longRecommendation =
+                "This recommendation is intentionally long so it can wrap without overlapping the character counter.";
+            const {findByTestId, findByText} = render(
+                <TextField
+                    placeholder="test Name"
+                    label="test Name"
+                    id="testName"
+                    inputProps={{"data-testid": "test-name-input"}}
+                    data-testid="test-name-text-field"
+                    size="small"
+                    value="abc"
+                    maxLength={10}
+                    recommendation={longRecommendation}
+                    tooltipText="tooltip text"
+                    helperText="helper text"
+                />
+            );
+
+            const recommendationNode = await findByTestId("testName-recommendation-text");
+            const maxLengthNode = await findByText("3/10 Characters");
+
+            expect(recommendationNode).toBeInTheDocument();
+            expect(maxLengthNode).toBeInTheDocument();
+
+            const recommendationContainer = recommendationNode.parentElement;
+            const footerRow = recommendationContainer?.parentElement;
+
+            expect(recommendationContainer).toHaveStyle("flex: 1");
+            expect(recommendationContainer).toHaveStyle("min-width: 0");
+            expect(footerRow).toHaveStyle("display: flex");
+            expect(footerRow).toHaveStyle("justify-content: space-between");
+            expect(maxLengthNode).toHaveStyle("white-space: nowrap");
+
+            // 508 compliance
+            const textNode = await findByTestId("test-name-input");
+            const describedBy = textNode.getAttribute("aria-describedby") || "";
+
+            expect(describedBy).toContain("testName-helper-text");
+            expect(describedBy).toContain("testName-tooltip");
+            expect(describedBy).toContain("testName-recommendation-text");
+        });
+    });
 });

package/webpack.config.js

@@ -2,7 +2,6 @@ const path = require("path");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 const pkg = require("./package.json");
 const entry = ["./index.js"];