@madie/madie-design-system 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madie/madie-design-system",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Shared style guide across the Madie program.",
   "main": "dist/index.js",
   "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
@@ -16,6 +16,7 @@
     "precommit": "npm run format && npm run lint && npm run format-styles",
     "prepush": "npm test",
     "format": "prettier --write 'components/**/*.(js|jsx)'",
+    "format-test": "prettier --write 'test/**/*.(js|jsx)'",
     "lint": "eslint 'components/**/*.{js,jsx}'",
     "stylelint": "stylelint 'styles/**/*.{css,scss}'",
     "format-styles": "prettier 'styles/**/*.{css,scss}' --write --quiet",
@@ -40,6 +41,7 @@
     "@storybook/addon-storysource": "^6.4.13",
     "@storybook/addon-viewport": "^6.4.13",
     "@storybook/addons": "^6.4.13",
+    "@storybook/manager-webpack5": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@testing-library/react": "^12.1.2",
     "autoprefixer": "^10.4.2",
@@ -80,7 +82,6 @@
     "style-loader": "^1.3.0",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.2",
-    "terser-webpack-plugin": "^4.2.3",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"
   },
@@ -103,14 +104,11 @@
   },
   "dependencies": {
     "@cmsgov/design-system": "^2.13.0",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "@mui/icons-material": "^5.5.0",
-    "@mui/material": "5.0.2",
-    "@mui/styles": "^5.5.0",
     "@reach/portal": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
+    "@storybook/builder-webpack5": "^6.4.19",
     "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/user-event": "^13.5.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "axios": "^0.24.0",
     "classnames": "^2.3.1",
@@ -126,7 +124,16 @@
     "xss": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2"
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "5.0.2",
+    "@mui/styles": "^5.5.0",
+    "@mui/system": "^5.5.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "overrides": {
+    "webpack": "^5.70.0"
   }
 }

package/styles/qppds/components/_button.scss

@@ -138,7 +138,35 @@
       padding: 1px;
     }
   }
-
+  // cyan
+  &.qpp-c-button--cyan {
+    background-color: $cyan-40;
+    border-color: $cyan-40;
+    &:disabled,
+    &.qpp-c-button--disabled {
+    background-color: $gray-04;
+    color: $gray-60;
+    border-color: $gray-04;
+    }
+  
+    &:hover,
+    &.qpp-c-button--hover {
+      background-color: $cyan-50;
+      border-color:$cyan-50;
+    }
+  
+    &:active,
+    &.qpp-c-button--active {
+    background-color: fade-out($cyan-40, 0.2);
+    }
+  
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid #048087;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 0px 4px rgba(32, 159, 166, 0.2);
+    }
+  }
   // Outline Button
   &.qpp-c-button--outline {
     background-color: transparent;

package/test/components/Accordion.test.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Accordion from '../../components/Accordion';
+import React from "react";
+import { render } from "@testing-library/react";
+import Accordion from "../../components/Accordion";
 
-describe('Accordion', () => {
-  it('Should render okay', () => {
-    const { getByTestId } = render(
-        <Accordion title="Title">Content</Accordion>
-    );
-    expect(getByTestId('accordion')).toBeTruthy();
-  });
+describe("Accordion", () => {
+    it("Should render okay", () => {
+        const { getByTestId } = render(
+            <Accordion title="Title">Content</Accordion>
+        );
+        expect(getByTestId("accordion")).toBeTruthy();
+    });
 });

package/test/components/ErrorUI.test.js

@@ -1,33 +1,32 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ErrorUI from '../../components/Error/ErrorUI';
+import React from "react";
+import { render } from "@testing-library/react";
+import ErrorUI from "../../components/Error/ErrorUI";
 
+describe("ErrorUI", () => {
+    it("renders a list of errors in HTML", () => {
+        const code = "404";
+        const type = "Bad thing happened";
+        const message = [
+            { contentTitle: "Not found", content: "test" },
+            { contentTitle: "Image not found", content: "test number 2" },
+        ];
+        const { debug, container } = render(
+            <ErrorUI type={type} code={code} message={message} />
+        );
+        expect(container.querySelector(".page-error")).toBeTruthy();
+        expect(container.querySelector(".collapsible-details")).toBeTruthy();
+        expect(container.querySelectorAll(".items li").length).toBe(2);
+    });
 
-describe('ErrorUI', () => {
-  it('renders a list of errors in HTML', () => {
-    const code = '404';
-    const type = 'Bad thing happened';
-    const message = [
-      { contentTitle: 'Not found', content: 'test' },
-      { contentTitle: 'Image not found', content: 'test number 2' },
-    ];
-    const { debug, container } = render(
-      <ErrorUI type={type} code={code} message={message} />
-    );
-    expect(container.querySelector('.page-error')).toBeTruthy()
-    expect(container.querySelector('.collapsible-details')).toBeTruthy()
-    expect(container.querySelectorAll('.items li').length).toBe(2)
-  });
-
-  it('renders a string instead of an array', () => {
-    const code = '404';
-    const type = 'Bad thing happened';
-    const message = 'Not found';
-    const { getByText, container } = render(
-      <ErrorUI type={type} code={code} message={message} />
-    );
-    expect(container.querySelector('.page-error')).toBeTruthy()
-    expect(container.querySelector('.collapsible-details')).toBeTruthy()
-    expect(getByText(/not found/i)).toBeTruthy()
-  });
+    it("renders a string instead of an array", () => {
+        const code = "404";
+        const type = "Bad thing happened";
+        const message = "Not found";
+        const { getByText, container } = render(
+            <ErrorUI type={type} code={code} message={message} />
+        );
+        expect(container.querySelector(".page-error")).toBeTruthy();
+        expect(container.querySelector(".collapsible-details")).toBeTruthy();
+        expect(getByText(/not found/i)).toBeTruthy();
+    });
 });

package/test/components/FooterUI.test.js

@@ -1,90 +1,92 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
-import { expect } from 'chai';
-import FooterUI from '../../components/Footer/FooterUI';
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import { expect } from "chai";
+import FooterUI from "../../components/Footer/FooterUI";
 
 class Wrapper extends Component {
-  render() {
-    return this.props.children;
-  }
+    render() {
+        return this.props.children;
+    }
 }
 
-describe('FooterUI', () => {
-  it('renders the footer HTML', () => {
-    // Native elements and functional stateless react components don't have public instances and
-    // cannot be used with renderIntoDocument. React has a separate package install for a shallow
-    // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <FooterUI />
-      </Wrapper>
-    );
-    const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
-      component,
-      'footer'
-    );
-    const footerNode = ReactDOM.findDOMNode(footer);
-    expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
-  });
+describe("FooterUI", () => {
+    it("renders the footer HTML", () => {
+        // Native elements and functional stateless react components don't have public instances and
+        // cannot be used with renderIntoDocument. React has a separate package install for a shallow
+        // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <FooterUI />
+            </Wrapper>
+        );
+        const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
+            component,
+            "footer"
+        );
+        const footerNode = ReactDOM.findDOMNode(footer);
+        expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
+    });
 
-  it('renders the footer HTML', () => {
-    const version = '1.2.3.4';
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <FooterUI buildVersion={version} />
-      </Wrapper>
-    );
-    const buildVersion = ReactTestUtils.findRenderedDOMComponentWithClass(
-      component,
-      'build-version'
-    );
-    const buildVersionNode = ReactDOM.findDOMNode(buildVersion);
-    expect(ReactTestUtils.isDOMComponent(buildVersionNode)).to.be.true;
-    expect(buildVersion.textContent).to.equal(version);
-  });
+    it("renders the footer HTML", () => {
+        const version = "1.2.3.4";
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <FooterUI buildVersion={version} />
+            </Wrapper>
+        );
+        const buildVersion = ReactTestUtils.findRenderedDOMComponentWithClass(
+            component,
+            "build-version"
+        );
+        const buildVersionNode = ReactDOM.findDOMNode(buildVersion);
+        expect(ReactTestUtils.isDOMComponent(buildVersionNode)).to.be.true;
+        expect(buildVersion.textContent).to.equal(version);
+    });
 
-  it('renders the footer properly in the Authenticated experience', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <FooterUI isFullWidth={true} />
-      </Wrapper>
-    );
-    const isFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-      component,
-      'container-full-width'
-    )[1];
-    const isFullWidthNode = ReactDOM.findDOMNode(isFullWidth);
-    expect(ReactTestUtils.isDOMComponent(isFullWidthNode)).to.be.true;
-  });
+    it("renders the footer properly in the Authenticated experience", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <FooterUI isFullWidth={true} />
+            </Wrapper>
+        );
+        const isFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
+            component,
+            "container-full-width"
+        )[1];
+        const isFullWidthNode = ReactDOM.findDOMNode(isFullWidth);
+        expect(ReactTestUtils.isDOMComponent(isFullWidthNode)).to.be.true;
+    });
 });
 
-describe('renders the footer properly in the non-authenticated experience', () => {
-  it('renders by default the non-authenticated experience', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <FooterUI />
-      </Wrapper>
-    );
-    const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-      component,
-      'responsive-container'
-    )[1];
-    const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-  });
+describe("renders the footer properly in the non-authenticated experience", () => {
+    it("renders by default the non-authenticated experience", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <FooterUI />
+            </Wrapper>
+        );
+        const isNotFullWidth =
+            ReactTestUtils.scryRenderedDOMComponentsWithClass(
+                component,
+                "responsive-container"
+            )[1];
+        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
+        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+    });
 
-  it('explicitly renders the non-authenticated experience', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <FooterUI isFullWidth={false} />
-      </Wrapper>
-    );
-    const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-      component,
-      'responsive-container'
-    )[1];
-    const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-  });
+    it("explicitly renders the non-authenticated experience", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <FooterUI isFullWidth={false} />
+            </Wrapper>
+        );
+        const isNotFullWidth =
+            ReactTestUtils.scryRenderedDOMComponentsWithClass(
+                component,
+                "responsive-container"
+            )[1];
+        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
+        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+    });
 });

package/test/components/HeaderUI.test.js

@@ -1,45 +1,49 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
-import { waitFor, cleanup, fireEvent, render } from '@testing-library/react';
-import moxios from 'moxios';
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import { waitFor, cleanup, fireEvent, render } from "@testing-library/react";
+import moxios from "moxios";
 
-import HeaderUI from '../../components/Header/HeaderUI';
+import HeaderUI from "../../components/Header/HeaderUI";
 
-describe('HeaderUI', () => {
-  beforeEach(() => {
-    moxios.install();
-  });
+describe("HeaderUI", () => {
+    beforeEach(() => {
+        moxios.install();
+    });
 
-  afterEach(() => {
-    moxios.uninstall();
-  });
+    afterEach(() => {
+        moxios.uninstall();
+    });
 
-  it('renders a header', async () => {
-    window.location = {
-      origin: 'localhost:3000'
-    }
-    moxios.stubRequest(`${window.location.origin}/config/header`, {
-      status: 200,
-      responseText: JSON.stringify({
-        data: {
-          content: [
-            {
-              name: 'Test Header Menu',
-              subtitle: 'The test menu item',
-            },
-          ],
-        },
-      }),
+    it("renders a header", async () => {
+        window.location = {
+            origin: "localhost:3000",
+        };
+        moxios.stubRequest(`${window.location.origin}/config/header`, {
+            status: 200,
+            responseText: JSON.stringify({
+                data: {
+                    content: [
+                        {
+                            name: "Test Header Menu",
+                            subtitle: "The test menu item",
+                        },
+                    ],
+                },
+            }),
+        });
+        const { container, getByText } = render(<HeaderUI />);
+        await waitFor(() =>
+            expect(container.querySelector("nav")).toBeDefined()
+        );
+        expect(getByText("Test Header Menu")).toBeDefined();
     });
-    const { container, getByText } = render(<HeaderUI />);
-    await waitFor(() => expect(container.querySelector('nav')).toBeDefined());
-    expect(getByText('Test Header Menu')).toBeDefined();
-  });
 
-  it('renders a header with login menu', async () => {
-    const { container } = render(<HeaderUI isLoginEnabled={true} />);
-    await waitFor(() => expect(container.querySelector('nav')).toBeDefined());
-    expect(container.querySelector('.login')).toBeDefined();
-  });
+    it("renders a header with login menu", async () => {
+        const { container } = render(<HeaderUI isLoginEnabled={true} />);
+        await waitFor(() =>
+            expect(container.querySelector("nav")).toBeDefined()
+        );
+        expect(container.querySelector(".login")).toBeDefined();
+    });
 });

package/test/components/Infotip.test.js

@@ -1,73 +1,76 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { act, Simulate } from 'react-dom/test-utils';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import Infotip from '../../components/Infotip';
+import React from "react";
+import ReactDOM from "react-dom";
+import { act, Simulate } from "react-dom/test-utils";
+import { expect } from "chai";
+import { spy } from "sinon";
+import Infotip from "../../components/Infotip";
 
-describe('Infotip', () => {
-  let container;
+describe("Infotip", () => {
+    let container;
 
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('renders an svg icon for tooltip anchor', () => {
-    act(() => {
-      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    beforeEach(() => {
+        container = document.createElement("div");
+        document.body.appendChild(container);
     });
-    const svg = container.querySelector('svg');
-    expect(svg).to.be.ok;
-  });
 
-  it('renders white icon when lightIcon prop is true', () => {
-    act(() => {
-      ReactDOM.render(<Infotip lightIcon label="tooltip text" />, container);
+    afterEach(() => {
+        document.body.removeChild(container);
+        container = null;
     });
-    const paths = container.querySelectorAll('path');
-    expect(paths[1].getAttribute('fill')).to.equal('#FFF');
-    expect(paths[2].getAttribute('fill')).to.equal('#04838A');
-  });
 
-  it('overrides "touchstart" events for button', () => {
-    act(() => {
-      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    it("renders an svg icon for tooltip anchor", () => {
+        act(() => {
+            ReactDOM.render(<Infotip label="tooltip text" />, container);
+        });
+        const svg = container.querySelector("svg");
+        expect(svg).to.be.ok;
     });
-    const button = container.querySelector('button');
-    const stopPropagation = spy();
-    Simulate.touchStart(button, { stopPropagation });
-    expect(stopPropagation.called).to.be.true;
-  });
 
-  it('uses "touchend" event on button to prevent default and toggle focus', () => {
-    act(() => {
-      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    it("renders white icon when lightIcon prop is true", () => {
+        act(() => {
+            ReactDOM.render(
+                <Infotip lightIcon label="tooltip text" />,
+                container
+            );
+        });
+        const paths = container.querySelectorAll("path");
+        expect(paths[1].getAttribute("fill")).to.equal("#FFF");
+        expect(paths[2].getAttribute("fill")).to.equal("#04838A");
     });
-    const button = container.querySelector('button');
-    const preventDefault = spy();
-    const focus = spy(button, 'focus');
-    const blur = spy(button, 'blur');
-    Simulate.touchEnd(button, {
-      preventDefault,
+
+    it('overrides "touchstart" events for button', () => {
+        act(() => {
+            ReactDOM.render(<Infotip label="tooltip text" />, container);
+        });
+        const button = container.querySelector("button");
+        const stopPropagation = spy();
+        Simulate.touchStart(button, { stopPropagation });
+        expect(stopPropagation.called).to.be.true;
     });
-    expect(preventDefault.calledOnce).to.be.true;
-    expect(button.focus.calledOnce).to.be.true;
-    expect(button.blur.calledOnce).to.be.false;
-    Simulate.touchEnd(button, {
-      preventDefault,
-      currentTarget: {
-        focus,
-        blur,
-      },
+
+    it('uses "touchend" event on button to prevent default and toggle focus', () => {
+        act(() => {
+            ReactDOM.render(<Infotip label="tooltip text" />, container);
+        });
+        const button = container.querySelector("button");
+        const preventDefault = spy();
+        const focus = spy(button, "focus");
+        const blur = spy(button, "blur");
+        Simulate.touchEnd(button, {
+            preventDefault,
+        });
+        expect(preventDefault.calledOnce).to.be.true;
+        expect(button.focus.calledOnce).to.be.true;
+        expect(button.blur.calledOnce).to.be.false;
+        Simulate.touchEnd(button, {
+            preventDefault,
+            currentTarget: {
+                focus,
+                blur,
+            },
+        });
+        expect(preventDefault.calledTwice).to.be.true;
+        expect(focus.calledOnce).to.be.true;
+        expect(blur.calledOnce).to.be.true;
     });
-    expect(preventDefault.calledTwice).to.be.true;
-    expect(focus.calledOnce).to.be.true;
-    expect(blur.calledOnce).to.be.true;
-  });
 });