@madie/madie-design-system 1.2.101 → 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.101",
+    "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/Pagination.test.js

@@ -9,6 +9,62 @@ describe("Pagination", () => {
         const { getByTestId } = render(<Pagination />);
         expect(getByTestId("NavigateNextIcon")).toBeInTheDocument();
     });
+    it("provides an accessible name for the items per page select", () => {
+        const { getByRole } = render(
+            <Pagination
+                totalItems={30}
+                visibleItems={10}
+                count={3}
+                offset={0}
+                page={1}
+                limit={10}
+            />
+        );
+
+        const limitSelect = getByRole("combobox", {
+            name: /items per page/i,
+        });
+
+        expect(limitSelect).toHaveTextContent("10");
+        expect(limitSelect).toHaveAttribute(
+            "aria-labelledby",
+            "items-per-page pagination-limit-select"
+        );
+        expect(limitSelect).toHaveAttribute(
+            "aria-describedby",
+            "offset-of-total-items"
+        );
+        expect(limitSelect).toHaveAttribute("aria-haspopup", "listbox");
+        expect(limitSelect).toHaveAttribute("aria-expanded", "false");
+        expect(limitSelect).toHaveAttribute("tabindex", "0");
+    });
+    it("labels pagination controls accessibly", () => {
+        const { getByRole } = render(
+            <Pagination
+                count={3}
+                page={2}
+                hidePrevButton={false}
+                hideNextButton={false}
+            />
+        );
+
+        expect(
+            getByRole("navigation", { name: "pagination navigation" })
+        ).toBeInTheDocument();
+        expect(
+            getByRole("button", { name: "Go to previous page" })
+        ).toBeInTheDocument();
+        expect(
+            getByRole("button", { name: "Go to next page" })
+        ).toBeInTheDocument();
+        expect(
+            getByRole("button", { name: "Go to page 1" })
+        ).toBeInTheDocument();
+        expect(getByRole("button", { name: "page 2" })).toHaveAttribute(
+            "aria-current",
+            "page"
+        );
+    });
     it("renders the next button when more pages are available", () => {
         const { getByTestId } = render(
             <Pagination

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/storybook-static/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

package/storybook-static/index.html

@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-
-    <title>@storybook/core - Storybook</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-
-    
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    
-    <style>
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
-      }
-    </style>
-
-    <link href="./sb-manager/runtime.js" rel="modulepreload" />
-
-    
-    <link href="./sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/actions-1/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/links-2/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/storysource-3/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/knobs-4/register-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/a11y-5/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/docs-6/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/backgrounds-7/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/viewport-8/manager-bundle.js" rel="modulepreload" />
-       
-
-    <style>
-      #storybook-root[hidden] {
-        display: none !important;
-      }
-    </style>
-
-    
-  </head>
-  <body>
-    <div id="root"></div>
-
-    
-    <script>
-      
-        
-          window['FEATURES'] = {
-  "argTypeTargetsV7": true,
-  "legacyDecoratorFileOrder": false,
-  "disallowImplicitActionsInRenderV8": true
-};
-        
-      
-        
-          window['REFS'] = {};
-        
-      
-        
-          window['LOGLEVEL'] = "info";
-        
-      
-        
-          window['DOCS_OPTIONS'] = {
-  "defaultName": "Docs",
-  "autodocs": "tag"
-};
-        
-      
-        
-          window['CONFIG_TYPE'] = "PRODUCTION";
-        
-      
-        
-      
-        
-      
-        
-          window['TAGS_OPTIONS'] = {
-  "dev-only": {
-    "excludeFromDocsStories": true
-  },
-  "docs-only": {
-    "excludeFromSidebar": true
-  },
-  "test-only": {
-    "excludeFromSidebar": true,
-    "excludeFromDocsStories": true
-  }
-};
-        
-      
-        
-          window['STORYBOOK_RENDERER'] = "react";
-        
-      
-        
-          window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5";
-        
-      
-        
-          window['STORYBOOK_FRAMEWORK'] = "@storybook/react-webpack5";
-        
-      
-    </script>
-    
-
-    <script type="module">
-      import './sb-manager/globals-runtime.js';
-      
-      
-        import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
-      
-        import './sb-addons/actions-1/manager-bundle.js';
-      
-        import './sb-addons/links-2/manager-bundle.js';
-      
-        import './sb-addons/storysource-3/manager-bundle.js';
-      
-        import './sb-addons/knobs-4/register-bundle.js';
-      
-        import './sb-addons/a11y-5/manager-bundle.js';
-      
-        import './sb-addons/docs-6/manager-bundle.js';
-      
-        import './sb-addons/backgrounds-7/manager-bundle.js';
-      
-        import './sb-addons/viewport-8/manager-bundle.js';
-      
-      
-      import './sb-manager/runtime.js';
-    </script>
-  </body>
-</html>