@madie/madie-design-system 1.2.102 → 1.2.103

package/jest.config.js

@@ -6,10 +6,6 @@ module.exports = {
         "^.+\\.(j|t)sx?$": "babel-jest",
     },
     setupFilesAfterEnv: ["@testing-library/jest-dom"],
-    moduleNameMapper: {
-        "^twin.macro$": "<rootDir>/test/__mocks__/twin.macro.js",
-        "^styled-components/macro$": "<rootDir>/test/__mocks__/styled-components-macro.js",
-    },
     globals: {
         "ts-jest": {
             tsconfig: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.102",
+    "version": "1.2.103",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
@@ -23,37 +23,26 @@
         "stylelint": "stylelint 'styles/**/*.{css,scss}'",
         "format-styles": "prettier 'styles/**/*.{css,scss}' --write --quiet",
         "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build",
-        "predeploy": "npm run build-storybook",
-        "deploy": "gh-pages -d storybook-static"
+        "build-storybook": "storybook build"
     },
     "devDependencies": {
-        "@babel/cli": "^7.25.6",
         "@babel/core": "^7.25.2",
         "@babel/preset-env": "^7.25.4",
         "@babel/preset-react": "^7.24.7",
         "@babel/register": "^7.24.6",
-        "@storybook/addon-a11y": "^8.3.0",
-        "@storybook/addon-actions": "^8.6.18",
-        "@storybook/addon-backgrounds": "^8.3.0",
-        "@storybook/addon-docs": "^8.3.0",
-        "@storybook/addon-knobs": "^8.0.1",
-        "@storybook/addon-links": "^8.3.0",
-        "@storybook/addon-storysource": "^8.3.0",
-        "@storybook/addon-viewport": "^8.3.0",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/addons": "^7.6.17",
-        "@storybook/react": "^8.3.0",
-        "@storybook/react-webpack5": "^8.3.0",
+        "@storybook/addon-a11y": "^10.6.2",
+        "@storybook/addon-docs": "^10.6.2",
+        "@storybook/addon-links": "^10.6.2",
+        "@storybook/react": "^10.6.2",
+        "@storybook/react-vite": "^10.6.2",
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
         "autoprefixer": "^10.4.2",
         "babel-eslint": "^10.1.0",
-        "babel-jest": "^27.4.6",
+        "babel-jest": "^30.0.0",
         "babel-loader": "^8.2.3",
-        "babel-plugin-macros": "^3.1.0",
         "chai": "^4.3.4",
         "css-loader": "^7.1.2",
         "enzyme": "^3.11.0",
@@ -65,10 +54,9 @@
         "eslint-plugin-react": "^7.28.0",
         "feather-icons-react": "^0.4.3",
         "file-loader": "^6.2.0",
-        "gh-pages": "^6.0.0",
         "html-webpack-plugin": "^5.5.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest": "^30.0.0",
+        "jest-environment-jsdom": "^30.0.0",
         "mini-css-extract-plugin": "^0.11.3",
         "moxios": "^0.4.0",
         "node-fetch": "^2.6.7",
@@ -83,8 +71,11 @@
         "sass": "^1.48.0",
         "sass-loader": "^10.2.1",
         "sinon": "^12.0.1",
+        "storybook": "^10.6.2",
         "style-loader": "^1.3.0",
         "svgo-loader": "^4.0.0",
+        "terser-webpack-plugin": "^5.6.1",
+        "vite": "^7.3.7",
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2"
     },
@@ -106,7 +97,6 @@
         "url": "https://github.com/MeasureAuthoringTool/madie-design-system/issues"
     },
     "dependencies": {
-        "@cmsgov/design-system": "^5.0.2",
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^6.1.0",
@@ -144,8 +134,7 @@
         "retry": "^0.13.1",
         "styled-components": "^5.3.7",
         "svgo": "^3.3.4",
-        "tailwindcss": "^3.4.10",
-        "twin.macro": "^3.4.0",
+        "tailwindcss": "^4.3.3",
         "what-input": "^5.2.10",
         "xss": "^1.0.10",
         "yaml": "^2.9.0"
@@ -162,6 +151,7 @@
         "glob-parent": "^6.0.1",
         "semver": "^7.5.3",
         "optionator": "0.9.3",
+        "webpack-dev-middleware": "^7.4.5",
         "@cmsgov/design-system": {
             "inquirer": {
                 "external-editor": {

package/styles/_main.scss

@@ -1,11 +1,5 @@
 @charset "utf-8";
 
-// TODO: Remove @cmsgov/design-system dependancies from shared package
-$font-path: "~@cmsgov/design-system/dist/fonts";
-$image-path: "~@cmsgov/design-system/dist/images";
-
-@import "@cmsgov/design-system/dist/scss/index";
-
 @import "paths";
 
 @import "third-party/legacy-bootstrap";

package/test/components/MadieTable.test.js

@@ -15,6 +15,7 @@ const TestTableWrapper = ({
   handleSort = jest.fn(),
   renderExpandedRow,
   emptyMessage,
+  ariaLabel,
 }) => {
   const table = useReactTable({
     data,
@@ -30,6 +31,7 @@ const TestTableWrapper = ({
       handleSort={handleSort}
       renderExpandedRow={renderExpandedRow}
       emptyMessage={emptyMessage}
+      ariaLabel={ariaLabel}
     />
   );
 };
@@ -188,4 +190,40 @@ it("renders descending sort icon when currentSort is DESC", () => {
   ).toBeInTheDocument();
 });
 
+  it("exposes sort state through aria-sort on the column header", () => {
+    render(
+      <TestTableWrapper
+        data={data}
+        columns={columns}
+        currentSort="name"
+        currentDirection="ASC"
+      />
+    );
+    expect(
+      screen.getByRole("columnheader", { name: /measure name/i })
+    ).toHaveAttribute("aria-sort", "ascending");
+  });
+
+  it("marks unsorted sortable headers with aria-sort none", () => {
+    render(<TestTableWrapper data={data} columns={columns} />);
+    expect(
+      screen.getByRole("columnheader", { name: /measure name/i })
+    ).toHaveAttribute("aria-sort", "none");
+  });
+
+  it("makes sortable headers keyboard focusable and shows the sort affordance on focus", () => {
+    render(<TestTableWrapper data={data} columns={columns} />);
+    const button = screen.getByRole("button", { name: /measure name/i });
+    button.focus();
+    expect(button).toHaveFocus();
+    expect(screen.getByTestId("unfold-more-icon")).toBeInTheDocument();
+  });
+
+  it("applies an accessible name to the table", () => {
+    render(
+      <TestTableWrapper data={data} columns={columns} ariaLabel="Measures" />
+    );
+    expect(screen.getByRole("table", { name: "Measures" })).toBeInTheDocument();
+  });
+
 });

package/test/components/TruncateText.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TruncateText } from "../../components";
+
+describe("TruncateText", () => {
+    const longText = "This is a long description that should be truncated";
+
+    it("renders full text without a toggle when within the limit", () => {
+        render(<TruncateText text="short" maxLength={10} dataTestId="t" />);
+        expect(screen.getByText("short")).toBeInTheDocument();
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("is reachable by keyboard and toggles with Enter", () => {
+        render(<TruncateText text={longText} maxLength={5} dataTestId="t" />);
+        userEvent.tab();
+        const button = screen.getByRole("button", { name: "Show more" });
+        expect(button).toHaveFocus();
+        expect(button).toHaveAttribute("type", "button");
+        expect(button).toHaveAttribute("aria-expanded", "false");
+        userEvent.keyboard("{enter}");
+        expect(screen.getByText(longText)).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Show less" })).toHaveAttribute(
+            "aria-expanded",
+            "true"
+        );
+    });
+
+    it("links the toggle to the text it controls", () => {
+        render(<TruncateText text={longText} maxLength={5} dataTestId="t" />);
+        const button = screen.getByRole("button");
+        const target = document.getElementById(
+            button.getAttribute("aria-controls")
+        );
+        expect(target).toHaveTextContent("This");
+    });
+});

package/.storybook/main.js

@@ -1,61 +0,0 @@
-module.exports = {
-    stories: [
-        "../components/**/*.@(mdx|stories.@(js|jsx))",
-        "../lib/**/*.@(mdx|stories.@(js|jsx))"
-    ],
-
-    addons: [
-        "@storybook/addon-actions",
-        "@storybook/addon-links",
-        "@storybook/addon-storysource",
-        "@storybook/addon-knobs",
-        "@storybook/addon-a11y",
-        "@storybook/addon-docs",
-        "@storybook/addon-backgrounds",
-        "@storybook/addon-viewport",
-        "@storybook/addon-webpack5-compiler-babel"
-    ],
-
-    webpackFinal: async (config) => {
-        // do mutation to the config
-
-        config.module.rules.push({
-            test: /\.scss$/,
-            resolve: {
-                extensions: [".scss", ".sass"],
-            },
-            use: [
-                { loader: "style-loader" },
-                {
-                    loader: "css-loader",
-                    options: { sourceMap: true, importLoaders: 1 },
-                },
-                {
-                    loader: "sass-loader",
-                    options: {
-                        sourceMap: true,
-                    },
-                },
-            ],
-        });
-        // the below lines add hot reload, but somehow put CI/CD into a hanging state
-        // config.watchOptions = {
-        //     aggregateTimeout: 300, // Delay before rebuilding after the first change
-        //     poll: 1000,            // Check for changes every second
-        //     ignored: /node_modules/, // Ignore node_modules to improve performance
-        // };
-
-        return config;
-    },
-
-    framework: {
-        name: "@storybook/react-webpack5",
-        options: {}
-    },
-
-    docs: {},
-
-    typescript: {
-        reactDocgen: "react-docgen-typescript"
-    }
-};

package/components/Spinner/index.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import DSSpinner from "@cmsgov/design-system/dist/components/Spinner/Spinner";
-
-export default class Spinner {
-    constructor(options) {
-        render(<DSSpinner />, options.rootElement);
-    }
-}

package/components/UnwrappedSpinner/index.js

@@ -1,8 +0,0 @@
-import React, { Component } from "react";
-import DSSpinner from "@cmsgov/design-system/dist/components/Spinner/Spinner";
-
-export default class SpinnerUI extends Component {
-    render() {
-        return <DSSpinner />;
-    }
-}

package/test/__mocks__/styled-components-macro.js

@@ -1,2 +0,0 @@
-
-module.exports = {};

package/test/__mocks__/twin.macro.js

@@ -1,24 +0,0 @@
-const React = require("react");
-
-/**
- * Returns a tagged-template function that
- * produces a valid React component.
- */
-const createMockTag = (tag) => {
-  return () =>
-    React.forwardRef(({ children, ...props }, ref) =>
-      React.createElement(tag, { ref, ...props }, children)
-    );
-};
-
-const proxy = new Proxy(
-  {},
-  {
-    get: (_target, key) => createMockTag(key),
-  }
-);
-
-module.exports = {
-  __esModule: true,
-  default: proxy,
-};