Merge branch 'use-github-actions' of github.com:dequelabs/cauldron in…

…to use-github-actions

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.11.0](https://github.com/dequelabs/cauldron/compare/v5.10.0...v5.11.0) (2023-11-09)
+
+
+### Features
+
+* **react:** sync alert modals with uxpin ([5cfcb57](https://github.com/dequelabs/cauldron/commit/5cfcb5756051d09578f78fb60b49b4ef073504ae))
+
+
+### Bug Fixes
+
+* review comments ([5e22461](https://github.com/dequelabs/cauldron/commit/5e2246189d32c042a5f5c0d80c31fd2fdb36c801))
+
 ## [5.10.0](https://github.com/dequelabs/cauldron/compare/v5.9.1...v5.10.0) (2023-11-07)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "5.10.0",
+  "version": "5.11.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",

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

@@ -6,22 +6,31 @@ import axe from '../../../axe';
 const defaults = { show: false, heading: { text: 'hi' } };
 
 test('returns null if passed a falsey "show" prop', () => {
-  const alert = mount(<Alert {...defaults}>{'hello'}</Alert>);
+  const alert = mount(<Alert {...defaults}>hello</Alert>);
   expect(alert.html()).toBe('');
 });
 
 test('shows modal if passed a truthy "show" prop', () => {
   const alert = mount(
-    <Alert {...defaults} show={true}>
-      {'hello'}
+    <Alert {...defaults} show>
+      hello
     </Alert>
   );
   expect(alert.find('.Alert').exists()).toBe(true);
 });
 
 test('should return no axe violations', async () => {
   const alert = mount(
-    <Alert show={true} heading={'title'}>
+    <Alert show heading="title">
+      Hello!
+    </Alert>
+  );
+  expect(await axe(alert.html())).toHaveNoViolations();
+});
+
+test('should return no axe violations warning variant', async () => {
+  const alert = mount(
+    <Alert show variant="warning" heading="title">
       Hello!
     </Alert>
   );

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",

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

@@ -24,7 +24,7 @@ const Alert = ({
     heading={{
       text: (
         <React.Fragment>
-          <Icon type={variant === 'default' ? 'info-circle-alt' : 'caution'} />
+          <Icon type={variant === 'default' ? 'info-circle' : 'caution'} />
           {typeof heading === 'object' && 'text' in heading
             ? heading.text
             : heading}

packages/styles/alert.css

@@ -1,22 +1,37 @@
 :root {
   --alert-warning-background-color: #d93251;
   --alert-warning-header-text-color: #fff;
+
+  --alert-border-color: var(--accent-primary);
+  --alert-warning-border-color: var(--accent-error);
+
+  --alert-icon-color: var(--accent-primary);
+  --alert-warning-icon-color: var(--accent-error);
+}
+
+.cauldron--theme-dark {
+  --alert-border-color: var(--accent-info);
+  --alert-warning-border-color: var(--accent-danger);
+
+  --alert-icon-color: var(--accent-info);
+  --alert-warning-icon-color: var(--accent-danger);
 }
 
 .Alert .Dialog__header .Icon {
   padding-right: var(--space-smallest);
+  color: var(--alert-icon-color);
 }
 
-.Alert__warning .Dialog__inner {
-  border: 3px solid var(--alert-warning-background-color);
+.Alert .Dialog__inner {
+  border: 3px solid var(--alert-border-color);
 }
 
-.Alert__warning .Dialog__header {
-  background-color: var(--alert-warning-background-color);
+.Alert__warning .Dialog__header .Icon {
+  color: var(--alert-warning-icon-color);
 }
 
-.Alert__warning .Dialog__heading {
-  color: var(--alert-warning-header-text-color);
+.Alert__warning .Dialog__inner {
+  border: 3px solid var(--alert-warning-border-color);
 }
 
 .Alert .Dialog__footer {
@@ -27,6 +42,7 @@
   background-color: transparent;
 }
 
-.Alert__warning .Dialog__heading:focus {
-  border-bottom-color: var(--alert-warning-header-text-color);
+.cauldron--theme-dark .Alert .Dialog__footer {
+  border-top: none;
+  background: transparent;
 }

packages/styles/dialog.css

@@ -10,6 +10,10 @@
 }
 
 .cauldron--theme-dark {
+  --dialog-background-color: var(--accent-medium);
+  --dialog-border-color: var(--gray-20);
+  --dialog-header-background-color: var(--accent-dark);
+  --dialog-footer-background-color: var(--accent-dark);
   --dialog-heading-text-color: #fff;
 }
 
@@ -157,9 +161,8 @@
 /* Dark Theme */
 
 .cauldron--theme-dark .Dialog__inner {
-  background-color: var(--accent-medium);
   color: var(--white);
-  border: 4px solid var(--gray-20);
+  border-width: 4px;
 }
 
 .cauldron--theme-dark .Dialog__header {
@@ -172,7 +175,6 @@
 
 .cauldron--theme-dark .Dialog__header,
 .cauldron--theme-dark .Dialog__footer {
-  background-color: var(--accent-dark);
   color: var(--gray-20);
 }
 

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",