Merge pull request #1119 from dequelabs/release-v5.5.0

chore(cauldron): Release 5.5.0

.eslintignore

@@ -2,4 +2,5 @@
 **/lib/
 **/coverage/
 **/node_modules/
-docs/
+docs/
+.eslintrc.js

.eslintrc.js

@@ -13,7 +13,6 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
     'prettier',
-    'prettier/react',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended'
   ],
@@ -26,7 +25,8 @@ module.exports = {
       }
     ],
     '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off'
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn'
   },
   settings: {
     react: {

.github/workflows/tag-release.yaml

@@ -16,8 +16,8 @@ jobs:
         with:
           node-version: 16
       - run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
+          git config user.name attest-team-ci
+          git config user.email aciattestteamci@deque.com
           VERSION=$(node -p 'require("./package.json").version')
           if [ -z "$VERSION" ]; then
             echo "VERSION cannot be empty"

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.5.0](https://github.com/dequelabs/cauldron/compare/v5.4.1...v5.5.0) (2023-07-19)
+
+
+### Features
+
+* **react:** respect prefers-reduced-motion when opening/closing ExpandCollapsePanel or Accordion ([#1112](https://github.com/dequelabs/cauldron/issues/1112)) ([cfe8292](https://github.com/dequelabs/cauldron/commit/cfe8292dda72f35da34b1568d6f21eeb76f4acc9))
+* **styles:** removed unwanted text transform property ([#1102](https://github.com/dequelabs/cauldron/issues/1102)) ([fe1c8ad](https://github.com/dequelabs/cauldron/commit/fe1c8ad45eabfafee28691741220feab836c1113))
+
+
+### Bug Fixes
+
+* updated TwoColumnPanel to not override children keys ([#1100](https://github.com/dequelabs/cauldron/issues/1100)) ([b60588f](https://github.com/dequelabs/cauldron/commit/b60588fe44708a3fc01fb8bf18866171a8e0d9b3)), closes [#924](https://github.com/dequelabs/cauldron/issues/924)
+
 ### [5.4.1](https://github.com/dequelabs/cauldron/compare/v5.4.0...v5.4.1) (2023-06-21)
 
 

docs/components/Drawer.tsx

@@ -20,6 +20,7 @@ export default function Drawer({
   onClose = () => null
 }: DrawerProps) {
   const drawerRef = useRef<HTMLDivElement>(null);
+  const triggerElement = useRef<HTMLElement | null>(null);
 
   const handleClickOutside = () => {
     if (!open) {
@@ -34,14 +35,15 @@ export default function Drawer({
     const listener = (e: KeyboardEvent) => {
       if (e.which === 27 && open) {
         onClose();
+        triggerElement.current?.focus();
       }
     };
 
     document.body.addEventListener('keydown', listener);
     return () => {
       document.body.removeEventListener('keydown', listener);
     };
-  }, []);
+  }, [open]);
 
   // Ensure that focusable elements aren't focusable when the drawer is closed
   useEffect(() => {
@@ -54,6 +56,7 @@ export default function Drawer({
         (element as HTMLInputElement).tabIndex = -1;
       });
     } else {
+      triggerElement.current = document.activeElement as HTMLElement;
       Array.from(elements).forEach(element => {
         const tabIndexAttr = Number(element.getAttribute('tabindex'));
         (element as HTMLInputElement).tabIndex =

docs/pages/components/Line.mdx

@@ -0,0 +1,16 @@
+---
+title: Line
+description: A primitive component to display a divider line.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Line/index.tsx
+---
+
+import { Line } from '@deque/cauldron-react'
+
+## Examples
+
+```jsx example
+<Line />
+```
+
+## Props
+<ComponentProps className={true} />

docs/pages/components/RadioGroup.mdx

@@ -20,7 +20,7 @@ import { RadioGroup } from '@deque/cauldron-react'
 
 ```jsx example
 <FieldWrap>
-  <h3 id="gyros-label">Do you like gyros?</h3>
+  <div className="Field__label" id="gyros-label">Do you like gyros?</div>
   <RadioGroup
     aria-labelledby="gyros-label"
     name="gyros"
@@ -50,7 +50,7 @@ import { RadioGroup } from '@deque/cauldron-react'
 
 ```jsx example
 <FieldWrap>
-  <h3 id="pizza-label">Do you like pizza?</h3>
+  <div className="Field__label" id="pizza-label">Do you like pizza?</div>
   <RadioGroup
     aria-labelledby="pizza-label"
     defaultValue="tuesday"
@@ -86,7 +86,7 @@ If your list of options is short, `RadioGroup` can optionally accept a `inline`
 
 ```jsx example
 <FieldWrap>
-  <h3 id="robot-label">Are you a robot?</h3>
+  <div className="Field__label" id="robot-label">Are you a robot?</div>
   <RadioGroup
     aria-labelledby="robot-label"
     defaultValue="no"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -14,7 +14,7 @@
     "dev:styles": "yarn --cwd=packages/styles dev",
     "dev:docs": "webpack-dev-server",
     "fmt": "prettier --write \"e2e/*.ts\" \"docs/**/*.{css,js}\" \"packages/react/**/*.{js,ts,tsx}\" \"packages/styles/*.css\" *.{js,json,md,ts}",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
     "prebuild": "yarn clean",
     "predev": "yarn clean",
     "test": "yarn --cwd=packages/react test",
@@ -69,8 +69,8 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-syntax-highlighter": "^11.0.4",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^2.19.2",
-    "@typescript-eslint/parser": "^2.19.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.3.5-canary.0ddc00b",
     "babel-loader": "^8.0.5",
@@ -85,10 +85,10 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.11.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^3.0.1",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "express": "^4.17.3",
     "focusable": "^2.3.0",
     "fontsource-lato": "^4.0.0",

packages/react/__tests__/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extends: '../../../.eslintrc.js',
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-empty-function': 'off'

packages/react/__tests__/src/components/Accordion/index.js

@@ -5,10 +5,26 @@ import {
   AccordionTrigger,
   AccordionContent
 } from 'src/components/Accordion';
+import { createSandbox } from 'sinon';
 const { axe, toHaveNoViolations } = require('jest-axe');
 
 expect.extend(toHaveNoViolations);
 
+const sandbox = createSandbox();
+const noop = () => {};
+const matchMedia = {
+  matches: false
+};
+
+beforeEach(() => {
+  window.matchMedia = window.matchMedia || noop;
+  sandbox.stub(window, 'matchMedia').returns(matchMedia);
+});
+
+afterEach(() => {
+  sandbox.restore();
+});
+
 describe('Accordion', () => {
   it('renders without errors', () => {
     const accordion = mount(

packages/react/__tests__/src/components/ExpandCollapsePanel/ExpandCollapsePanel.js

@@ -4,10 +4,25 @@ import {
   default as ExpandCollapsePanel,
   PanelTrigger
 } from 'src/components/ExpandCollapsePanel';
+import { createSandbox } from 'sinon';
 import * as stylesheets from 'src/utils/stylesheets';
 
+const sandbox = createSandbox();
+const noop = () => {};
+const matchMedia = {
+  matches: false
+};
+
+let matchMediaStub;
+
+beforeEach(() => {
+  window.matchMedia = window.matchMedia || noop;
+  matchMediaStub = sandbox.stub(window, 'matchMedia').returns(matchMedia);
+});
+
 afterEach(() => {
   jest.resetAllMocks();
+  sandbox.restore();
 });
 
 const isVisible = element => {
@@ -222,3 +237,31 @@ test('should be able to switch between controlled and uncontrolled component', (
   wrapper.setProps({ open: true });
   expect(wrapper.state('controlled')).toBeTruthy();
 });
+
+test('should not animate open when prefers reduced motion is enabled', () => {
+  matchMediaStub
+    .withArgs('(prefers-reduced-motion: reduce)')
+    .returns({ matches: true });
+  const wrapper = mount(
+    <ExpandCollapsePanel animationTiming={500}>
+      <div data-test>foo</div>
+    </ExpandCollapsePanel>
+  );
+
+  wrapper.instance().setState({ isOpen: true });
+  expect(wrapper.state('isAnimating')).toBeFalsy();
+});
+
+test('should not animate close when prefers reduced motion is enabled', () => {
+  matchMediaStub
+    .withArgs('(prefers-reduced-motion: reduce)')
+    .returns({ matches: true });
+  const wrapper = mount(
+    <ExpandCollapsePanel animationTiming={500} open={true}>
+      <div data-test>foo</div>
+    </ExpandCollapsePanel>
+  );
+
+  wrapper.instance().setState({ isOpen: false });
+  expect(wrapper.state('isAnimating')).toBeFalsy();
+});

packages/react/__tests__/svgMock.js

@@ -1 +1,2 @@
+// eslint-disable-next-line react/display-name
 module.exports = () => null;

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {
@@ -60,10 +60,6 @@
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
     "jest": "^24.7.1",
     "jest-axe": "^3.4.0",
     "jsdom": "^16.2.2",

packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import { Cauldron } from '../../types';
+import PropTypes from 'prop-types';
 
-interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLSpanElement> {}
+type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement>;
 
-const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
+const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-disable-line react/display-name
   ({ className, children, ...props }: BreadcrumbItemProps, ref) => (
     <span
       className={classnames('Breadcrumb__Item', className)}
@@ -16,5 +16,7 @@ const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
     </span>
   )
 );
-
+BreadcrumbItem.propTypes = {
+  className: PropTypes.string
+};
 export default BreadcrumbItem;

packages/react/src/components/Card/CardContent.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export interface CardContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardContent = ({ className, ...other }: CardContentProps) => (
   <div className={classNames('Card__content', className)} {...other} />

packages/react/src/components/Card/CardFooter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardFooter = ({ className, ...other }: CardFooterProps) => (
   <div className={classNames('Card__footer', className)} {...other} />

packages/react/src/components/Card/CardHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardHeader = ({ className, ...other }: CardHeaderProps) => (
   <div className={classNames('Card__header', className)} {...other} />

packages/react/src/components/ClickOutsideListener/index.tsx

@@ -93,7 +93,7 @@ export default class ClickOutsideListener extends React.Component<
     setRef;
     // If child has its own ref, we want to update
     // its ref with the newly cloned node
-    let { ref } = this.props.children as any;
+    const { ref } = this.props.children as any;
     setRef(ref, node);
   };
 

packages/react/src/components/Code/index.tsx

@@ -86,7 +86,8 @@ Code.propTypes = {
   children: PropTypes.string.isRequired,
   language: PropTypes.oneOf(['javascript', 'css', 'html', 'yaml']),
   className: PropTypes.string,
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  scrollable: PropTypes.bool
 };
 
 export default Code;