Merge pull request #468 from bcgov/feature/bump-react-component-libra…

…ry-deps

Bump React component library dependencies

.github/workflows/test_react_component_library.yaml

@@ -33,6 +33,11 @@ jobs:
         run: npm install
         working-directory: ./packages/react-components
 
+      # Errors in lint process will cause this job to fail
+      - name: Lint
+        run: npm run lint
+        working-directory: ./packages/react-components
+
       - name: Run test suite with npm script
         run: npm run test:ci
         working-directory: ./packages/react-components

packages/react-components/package.json

@@ -23,8 +23,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@bcgov/design-tokens": "3.0.0",
-    "react-aria-components": "1.3.1"
+    "@bcgov/design-tokens": "3.1.0",
+    "react-aria-components": "1.3.3"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -49,29 +49,29 @@
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
     "@types/jest": "29.5.12",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.17.0",
-    "@typescript-eslint/parser": "7.17.0",
+    "@typescript-eslint/eslint-plugin": "8.2.0",
+    "@typescript-eslint/parser": "8.2.0",
     "@vitejs/plugin-react": "4.3.1",
-    "axe-playwright": "2.0.1",
+    "axe-playwright": "2.0.2",
     "eslint": "8.57.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.9",
+    "eslint-plugin-react-refresh": "0.4.11",
     "eslint-plugin-storybook": "0.8.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "rollup": "4.19.0",
+    "rollup": "4.21.0",
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "storybook": "8.2.9",
-    "ts-jest": "29.2.3",
+    "ts-jest": "29.2.4",
     "ts-node": "10.9.2",
     "tslib": "2.6.3",
     "typescript": "5.5.4",
-    "vite": "5.3.5"
+    "vite": "5.4.2"
   },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",

packages/react-components/src/components/Button/Button.test.tsx

@@ -34,3 +34,27 @@ describe("can be disabled with isDisabled prop", () => {
     expect(button).toBeDisabled();
   });
 });
+
+describe("gets the correct class for each variant", () => {
+  render(<Button variant="primary">Primary</Button>);
+  render(<Button variant="secondary">Secondary</Button>);
+  render(<Button variant="tertiary">Tertiary</Button>);
+  render(<Button variant="link">Link</Button>);
+  const primaryButton = screen.getByText(/primary/i);
+  const secondaryButton = screen.getByText(/secondary/i);
+  const tertiaryButton = screen.getByText(/tertiary/i);
+  const linkButton = screen.getByText(/link/i);
+
+  it("primary button has 'bcds-react-aria-Button' and 'primary' classes", () => {
+    expect(primaryButton).toHaveClass("bcds-react-aria-Button primary");
+  });
+  it("secondary button has 'bcds-react-aria-Button' and 'secondary' classes", () => {
+    expect(secondaryButton).toHaveClass("bcds-react-aria-Button secondary");
+  });
+  it("tertiary button has 'bcds-react-aria-Button' and 'tertiary' classes", () => {
+    expect(tertiaryButton).toHaveClass("bcds-react-aria-Button tertiary");
+  });
+  it("link button has 'bcds-react-aria-Button' and  'link' classes", () => {
+    expect(linkButton).toHaveClass("bcds-react-aria-Button link");
+  });
+});

packages/react-components/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,33 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import ButtonGroup from "./ButtonGroup";
+
+describe("ButtonGroup", () => {
+  render(<ButtonGroup data-testid="button-group" />);
+  render(
+    <ButtonGroup data-testid="orientation-vertical" orientation="vertical" />
+  );
+  render(<ButtonGroup data-testid="alignment-end" alignment="end" />);
+  render(<ButtonGroup data-testid="alignment-center" alignment="center" />);
+  const defaultButtonGroup = screen.getByTestId("button-group");
+  const verticalButtonGroup = screen.getByTestId("orientation-vertical");
+  const endButtonGroup = screen.getByTestId("alignment-end");
+  const centerButtonGroup = screen.getByTestId("alignment-center");
+
+  it("has default classes", () => {
+    expect(defaultButtonGroup).toHaveClass("bcds-ButtonGroup horizontal start");
+  });
+  it("has the role='group' attribute", () => {
+    expect(defaultButtonGroup).toHaveAttribute("role", "group");
+  });
+  it("passing orientation adds the correct class", () => {
+    expect(verticalButtonGroup).toHaveClass("bcds-ButtonGroup vertical start");
+  });
+  it("passing 'end' alignment adds the correct class", () => {
+    expect(endButtonGroup).toHaveClass("bcds-ButtonGroup horizontal end");
+  });
+  it("passing 'center' alignment adds the correct class", () => {
+    expect(centerButtonGroup).toHaveClass("bcds-ButtonGroup horizontal center");
+  });
+});

packages/react-components/src/components/Form/Form.tsx

@@ -3,7 +3,7 @@ import {
   FormProps as ReactAriaFormProps,
 } from "react-aria-components";
 
-export interface FormProps extends ReactAriaFormProps {}
+export type FormProps = ReactAriaFormProps;
 
 export default function Form({ ...props }: FormProps) {
   return <ReactAriaForm {...props} />;