Merge branch 'master' into bigdesign-635-box

.circleci/config.yml

@@ -8,7 +8,7 @@ orbs:
 default_executor: &default_executor
   executor:
     name: node/default
-    tag: '14.16'
+    tag: '14.17'
 
 filter_branch: &filter_branch
   filters:

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      day: 'tuesday'

package.json

@@ -23,15 +23,14 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ]
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",
@@ -41,12 +40,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.2.5",
     "lerna": "^4.0.0",
-    "lint-staged": "^9.2.0",
+    "lint-staged": "^12.1.7",
     "prettier": "^2.4.0",
     "typescript": "^4.4.3"
-  },
-  "resolutions": {
-    "is-svg": "^4.3.1",
-    "node-notifier": "^8.0.1"
   }
 }

packages/big-design-icons/package.json

@@ -5,7 +5,7 @@
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
   "typings": "dist/index.d.ts",
-  "license": "(MIT AND CC BY 3.0)",
+  "license": "(MIT AND CC-BY-3.0)",
   "author": "BigCommerce Inc",
   "repository": {
     "type": "git",
@@ -57,14 +57,14 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@types/styled-components": "^5.1.11",
-    "babel-plugin-styled-components": "^1.13.2",
+    "babel-plugin-styled-components": "^2.0.2",
     "camelcase": "^6.2.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "glob-promise": "^3.4.0",
     "inquirer": "^7.0.4",
     "inquirer-autocomplete-prompt": "^1.3.0",
-    "node-fetch": "^2.6.0",
+    "node-fetch": "^3.1.1",
     "prettier": "^2.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

packages/big-design-theme/package.json

@@ -3,7 +3,7 @@
   "version": "0.13.2-alpha.0",
   "sideEffects": false,
   "main": "src/index.ts",
-  "license": "(MIT AND CC BY 3.0)",
+  "license": "(MIT AND CC-BY-3.0)",
   "author": "BigCommerce Inc",
   "repository": {
     "type": "git",
@@ -52,10 +52,10 @@
     "@types/jest": "^27.0.2",
     "@types/styled-components": "^5.1.11",
     "babel-jest": "^27.2.5",
-    "babel-plugin-styled-components": "^1.13.2",
+    "babel-plugin-styled-components": "^2.0.2",
     "concurrently": "^6.2.1",
     "jest": "^27.2.5",
-    "jest-styled-components": "^7.0.5",
+    "jest-styled-components": "^7.0.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",

packages/big-design/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.30.3-alpha.1](https://github.com/bigcommerce/big-design/compare/@bigcommerce/[email protected]...@bigcommerce/[email protected]) (2022-01-14)
+
+
+### Bug Fixes
+
+* **component:** allows pill tabs to receive updated items ([#667](https://github.com/bigcommerce/big-design/issues/667)) ([46e4e1e](https://github.com/bigcommerce/big-design/commit/46e4e1eee9587f146098d19487f79ec6d9d9ee16))
+* **component:** change checkbox margin and box sizing ([#646](https://github.com/bigcommerce/big-design/issues/646)) ([3c9ac79](https://github.com/bigcommerce/big-design/commit/3c9ac79ea9d3631542f2103f0ba40f088b423083))
+* **component:** error locale must match ([#575](https://github.com/bigcommerce/big-design/issues/575)) ([fdbbba7](https://github.com/bigcommerce/big-design/commit/fdbbba78e601757eb5934dcb68ccb87f9a75aeb1)), closes [#525](https://github.com/bigcommerce/big-design/issues/525) [#525](https://github.com/bigcommerce/big-design/issues/525) [#525](https://github.com/bigcommerce/big-design/issues/525)
+* **component:** fix h3 font-weight to regular ([#647](https://github.com/bigcommerce/big-design/issues/647)) ([7662b8e](https://github.com/bigcommerce/big-design/commit/7662b8ea68b8a14773f2522b2e5ac2268b74484f))
+
+
+
+
+
 ## [0.30.3-alpha.0](https://github.com/bigcommerce/big-design/compare/@bigcommerce/[email protected]...@bigcommerce/[email protected]) (2021-10-28)
 
 

packages/big-design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/big-design",
-  "version": "0.30.3-alpha.0",
+  "version": "0.30.3-alpha.1",
   "sideEffects": false,
   "main": "src/index.ts",
   "author": "BigCommerce Inc",
@@ -9,7 +9,7 @@
     "url": "https://github.com/bigcommerce/big-design.git",
     "directory": "packages/big-design"
   },
-  "license": "(MIT AND CC BY 3.0)",
+  "license": "(MIT AND CC-BY-3.0)",
   "files": [
     "dist"
   ],
@@ -37,6 +37,7 @@
     "@bigcommerce/big-design-theme": "^0.13.2-alpha.0",
     "@popperjs/core": "^2.5.4",
     "@types/react-datepicker": "^3.1.5",
+    "date-fns": "2.22.1",
     "downshift": "6.1.0",
     "focus-trap": "^5.1.0",
     "polished": "^4.0.0",
@@ -60,9 +61,11 @@
     "@babel/preset-typescript": "^7.15.0",
     "@bigcommerce/configs": "^0.15.2-alpha.0",
     "@bigcommerce/pack": "^0.1.1-alpha.0",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^13.1.8",
     "@types/react": "^17.0.2",
@@ -71,10 +74,10 @@
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.11",
     "babel-jest": "^27.2.5",
-    "babel-plugin-styled-components": "^1.13.2",
+    "babel-plugin-styled-components": "^2.0.2",
     "concurrently": "^6.2.1",
     "jest": "^27.2.5",
-    "jest-styled-components": "^7.0.5",
+    "jest-styled-components": "^7.0.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",

packages/big-design/src/components/Alert/spec.tsx

@@ -1,4 +1,5 @@
 import { theme } from '@bigcommerce/big-design-theme';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import 'jest-styled-components';
 
@@ -7,80 +8,92 @@ import { fireEvent, render } from '@test/utils';
 import { Alert } from './Alert';
 
 test('render default (success) Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Success' }]} />);
+  render(<Alert messages={[{ text: 'Success' }]} />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
+  const alert = screen.getByRole('alert');
+
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
 });
 
 test('render error Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Error' }]} type="error" />);
+  render(<Alert messages={[{ text: 'Error' }]} type="error" />);
+
+  const alert = screen.getByRole('alert');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
 });
 
 test('render warning Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Warning' }]} type="warning" />);
+  render(<Alert messages={[{ text: 'Warning' }]} type="warning" />);
+
+  const alert = screen.getByRole('alert');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
 });
 
 test('render info Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Info' }]} type="info" />);
+  render(<Alert messages={[{ text: 'Info' }]} type="info" />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
+  const alert = screen.getByRole('alert');
+
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
 });
 
 test('renders with link', () => {
-  const { queryByRole, container } = render(
-    <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />,
-  );
+  render(<Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />);
 
-  expect(container.firstChild).toMatchSnapshot();
-
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const alert = screen.getByRole('alert');
+  const link = screen.getByRole<HTMLAnchorElement>('link');
 
+  expect(alert).toMatchSnapshot();
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
 });
 
 test('renders with external link', () => {
-  const { queryByRole, container } = render(
+  render(
     <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#', external: true, target: '_blank' } }]} />,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
-
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const alert = screen.getByRole('alert');
+  const link = screen.getByRole<HTMLAnchorElement>('link');
 
+  expect(alert).toMatchSnapshot();
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
   expect(link.target).toBe('_blank');
   expect(link.querySelector('svg')).not.toBeUndefined();
 });
 
 test('renders header', () => {
-  const { queryByText, container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
+  render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(queryByText('Header')).not.toBeUndefined();
+  const alert = screen.getByRole('alert');
+  const heading = screen.getByRole('heading', { name: /header/i });
+
+  expect(alert).toMatchSnapshot();
+  expect(heading).not.toBeUndefined();
 });
 
 test('renders close button', () => {
-  const { queryByRole, container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+  render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+
+  const alert = screen.getByRole('alert');
+  const button = screen.getByRole('button');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(queryByRole('button')).not.toBeUndefined();
+  expect(alert).toMatchSnapshot();
+  expect(button).not.toBeUndefined();
 });
 
 test('trigger onClose', () => {
   const fn = jest.fn();
-  const { queryByRole } = render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
+  render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
 
-  const button = queryByRole('button') as HTMLButtonElement;
+  const button = screen.getByRole('button');
 
   fireEvent.click(button);
 
@@ -91,7 +104,8 @@ test('does not forward styles', () => {
   const { container } = render(
     <Alert messages={[{ text: 'Success' }]} className="test" style={{ background: 'red' }} />,
   );
+  const alert = screen.getByRole('alert');
 
-  expect(container.getElementsByClassName('test').length).toBe(0);
-  expect(container.firstChild).not.toHaveStyle('background: red');
+  expect(container.getElementsByClassName('test')).toHaveLength(0);
+  expect(alert).not.toHaveStyle('background: red');
 });