chore(cauldron): Release 6.7.0

.github/actions/dependencies/action.yml

@@ -14,9 +14,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 22
         cache: yarn
         cache-dependency-path: '**/yarn.lock'
         registry-url: 'https://registry.npmjs.org'

.github/workflows/create-release-pr.yml

@@ -12,7 +12,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - run: yarn
       - name: Release
         run: yarn run release

.github/workflows/update-browserslist-db.yml

@@ -20,7 +20,7 @@ jobs:
           cd packages/react && npx update-browserslist-db@latest
           cd ../styles && npx update-browserslist-db@latest
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
         with:
           add-paths: |
             yarn.lock

.github/workflows/vpat-create.yml

@@ -24,7 +24,7 @@ jobs:
           product-name: Cauldron
           output-file: vpats/{DATE}-{PRODUCT}.md
           vpat-label: vpat
-      - uses: peter-evans/create-pull-request@v6
+      - uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: 'chore: Generate a VPAT'

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.
 
+## [6.7.0](https://github.com/dequelabs/cauldron/compare/v6.6.1...v6.7.0) (2024-09-11)
+
+
+### Features
+
+* **icon:** images icon ([#1649](https://github.com/dequelabs/cauldron/issues/1649)) ([411482d](https://github.com/dequelabs/cauldron/commit/411482df40038b27cd7bfbeceb2eba9571a24540))
+* **react:** added copy code functionality to `Code` component ([#1608](https://github.com/dequelabs/cauldron/issues/1608)) ([b21d38c](https://github.com/dequelabs/cauldron/commit/b21d38caf974f34bb0371258cdae17c61d7ca92d))
+* **styles:** synced `notice` styles ([#1665](https://github.com/dequelabs/cauldron/issues/1665)) ([1ed6c8f](https://github.com/dequelabs/cauldron/commit/1ed6c8fa7d06b1018ec31b8cc01ff2bee50260e9))
+
 ### [6.6.1](https://github.com/dequelabs/cauldron/compare/v6.6.0...v6.6.1) (2024-08-21)
 
 

docs/pages/components/Code.mdx

@@ -66,6 +66,18 @@ By default, Code components will wrap code forcing breaks where it can. If the o
 </Code>
 ```
 
+### Allow Copy
+
+Adds block with label and copy button that allows to copy code to clipboard.
+
+```jsx example
+<Code allowCopy label="Example Code Heading">
+ {`<div className="this element has a lot of classnames to ensure it will wrap at longer lengths">
+  Hello World
+</div>`}
+</Code>
+```
+
 ## Props
 
 <ComponentProps
@@ -82,6 +94,22 @@ By default, Code components will wrap code forcing breaks where it can. If the o
       type: 'boolean',
       default: 'false',
       description: 'Preserve the original markup, forcing the component to scroll when it overflows.'
+    },
+    {
+      name: 'label',
+      type: 'React.ContentNode',
+      description: 'Label for the code heading'
+    },
+    {
+      name: 'copyButtonProps',
+      type: 'React.ComponentProps<CopyButton>',
+      description: 'Properties to be applied to CopyButton'
+    },
+    {
+      name: 'allowCopy',
+      type: 'boolean',
+      default: 'false',
+      description: 'Prop to add CopyButton that copies code to the clipboard.'
     }
   ]}
 />

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.6.1",
+  "version": "6.7.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -49,15 +49,15 @@
     "@axe-core/puppeteer": "^4.9.1",
     "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-export-default-from": "^7.24.7",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@fontsource/lato": "^4.5.0",
     "@fontsource/pt-mono": "^5.0.13",
     "@fontsource/roboto": "^5.0.14",
     "@mdx-js/loader": "^2.3.0",
-    "@playwright/experimental-ct-react17": "^1.46.0",
-    "@playwright/test": "^1.46.0",
+    "@playwright/experimental-ct-react17": "^1.47.0",
+    "@playwright/test": "^1.47.0",
     "@types/classnames": "^2.2.9",
     "@types/express": "^4.17.21",
     "@types/node": "^22.1.0",
@@ -92,10 +92,10 @@
     "mdast-util-from-markdown": "^1.3.0",
     "mdast-util-mdx": "^2.0.1",
     "micromark-extension-mdxjs": "^1.0.0",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "node-fetch": "^3.3.0",
     "p-queue": "^6",
-    "playwright": "^1.44.0",
+    "playwright": "^1.47.0",
     "postcss-cli": "^6.0.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
@@ -116,7 +116,7 @@
     "terser-webpack-plugin": "^5.3.10",
     "ts-node": "^10.9.2",
     "typescript": "~5.5.4",
-    "webpack": "^5.76.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^5.0.4"
   }

packages/react/README.md

@@ -22,6 +22,10 @@ yarn add @deque/cauldron-react @deque/cauldron-styles
 
 To get started, follow our [usage guide](https://cauldron.dequelabs.com/#usage) that includes setup instructions and necessary dependencies. Further documentation is also available at [cauldron.dequelabs.com](https://cauldron.dequelabs.com) that includes documentation for every available Cauldron component.
 
+## Attribution
+
+Some Cauldron icons use Font Awesome Free and Font Awesome Pro. Their licenses can be found here: [Font Awesome Free License](https://fontawesome.com/license/free) and [Font Awesome Pro License](https://fontawesome.com/license).
+
 ## Contribute
 
 If you're interested in contributing to Cauldron, you can check out our [contribution guide](https://github.com/dequelabs/cauldron/blob/develop/CONTRIBUTING.md) as well as our [code of conduct](https://github.com/dequelabs/cauldron/blob/develop/CODE_OF_CONDUCT.md).

packages/react/package.json

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { createSandbox } from 'sinon';
 import Code from './';
@@ -19,6 +20,7 @@ beforeEach(() => {
 
 afterEach(() => {
   sandbox.restore();
+  jest.resetAllMocks();
 });
 
 test('should render Code block', () => {
@@ -85,3 +87,46 @@ test('should return no axe violations when scrollable', async () => {
   const results = await axe(container);
   expect(results).toHaveNoViolations();
 });
+
+test('should return no axe violations with label and copy button', async () => {
+  const { container } = render(
+    <Code
+      language="javascript"
+      label="Code Block Label"
+      allowCopy
+    >{`var some = "javascript"`}</Code>
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('should render label when provided', () => {
+  render(
+    <Code
+      language="javascript"
+      label="Code Block Label"
+    >{`var some = "javascript"`}</Code>
+  );
+  expect(screen.getByText('Code Block Label')).toBeInTheDocument();
+});
+
+test('should render copy button when allowCopy is true', () => {
+  render(
+    <Code language="javascript" allowCopy>{`var some = "javascript"`}</Code>
+  );
+  expect(screen.getByText('Copy')).toBeInTheDocument();
+});
+
+test('should copy code to clipboard when copy button is clicked', async () => {
+  const user = userEvent.setup();
+  const clipboardWriteText = jest.spyOn(
+    global.navigator.clipboard,
+    'writeText'
+  );
+  render(
+    <Code language="javascript" allowCopy>{`var some = "javascript"`}</Code>
+  );
+  const btn = screen.getByText('Copy');
+  await user.click(btn);
+  expect(clipboardWriteText).toHaveBeenCalledWith('var some = "javascript"');
+});

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

@@ -6,6 +6,9 @@ import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
 import css from 'react-syntax-highlighter/dist/cjs/languages/hljs/css';
 import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
 import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
+import type { ContentNode } from '../../types';
+import { useId } from 'react-id-generator';
+import CopyButton, { CopyButtonProps } from '../CopyButton';
 
 SyntaxHighlighter.registerLanguage('javascript', js);
 SyntaxHighlighter.registerLanguage('css', css);
@@ -21,17 +24,24 @@ type Props = {
   language?: 'javascript' | 'css' | 'html' | 'yaml';
   className?: string;
   scrollable?: boolean;
+  label?: ContentNode;
+  allowCopy?: boolean;
+  copyButtonProps?: React.ComponentProps<typeof CopyButton>;
 } & SyntaxHighlighterProps &
   React.HTMLAttributes<HTMLDivElement>;
 
 const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
   children,
   className,
   scrollable = false,
+  label,
+  allowCopy = false,
+  copyButtonProps,
   ...props
 }: Props) => {
   const ref = useRef<HTMLPreElement>(null);
   const [scrollableRegion, setScrollableRegion] = useState(false);
+  const [id] = useId(1, 'code');
   // react-syntax-highlighter does not provide direct access to its dom elements
   // via refs, but we can specify the wrapping tags to bypass this limitation
   // see: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/335
@@ -64,17 +74,25 @@ const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
   }, [scrollable]);
 
   return (
-    <Highlighter
-      {...props}
-      PreTag={PreWithRef}
-      useInlineStyles={false}
-      className={classNames('Code', className, {
-        'Code--scrollable': scrollable
-      })}
-      tabIndex={scrollableRegion ? 0 : undefined}
-    >
-      {children}
-    </Highlighter>
+    <>
+      {(label || allowCopy) && (
+        <div className="Code__Header">
+          {label && <span id={`${id}-label`}>{label}</span>}
+          {allowCopy && <CopyButton value={children} {...copyButtonProps} />}
+        </div>
+      )}
+      <Highlighter
+        {...props}
+        PreTag={PreWithRef}
+        useInlineStyles={false}
+        className={classNames('Code', className, {
+          'Code--scrollable': scrollable
+        })}
+        tabIndex={scrollableRegion ? 0 : undefined}
+      >
+        {children}
+      </Highlighter>
+    </>
   );
 };
 

packages/react/yarn.lock

@@ -2377,7 +2377,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -2479,9 +2479,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001580:
-  version "1.0.30001645"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz"
-  integrity sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==
+  version "1.0.30001655"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
@@ -4574,11 +4574,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:

packages/styles/code.css

@@ -10,6 +10,15 @@
   --code-border-color: var(--stroke-dark);
 }
 
+.Code__Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-smallest);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--text-size-body);
+}
+
 .Code.hljs {
   display: block;
   padding: var(--space-smaller);

packages/styles/notice.css

@@ -9,18 +9,24 @@
   --notice-border-color: var(--accent-dark);
   --notice-link-hover-color: var(--accent-medium);
   --notice-icon-size: 1rem;
+  --notice-info-border-color: var(--accent-primary-disabled);
+  --notice-caution-border-color: var(--accent-warning);
+  --notice-danger-border-color: var(--accent-error-disabled);
 }
 
 .Notice--info {
   --notice-background-color: var(--notice-info-color);
+  --notice-border-color: var(--notice-info-border-color);
 }
 
 .Notice--caution {
   --notice-background-color: var(--notice-caution-color);
+  --notice-border-color: var(--notice-caution-border-color);
 }
 
 .Notice--danger {
   --notice-background-color: var(--notice-danger-color);
+  --notice-border-color: var(--notice-danger-border-color);
 }
 
 .Notice {

packages/styles/package.json

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