refactor: update comma style to latest Prettier defaults

.eslintrc.js

@@ -14,7 +14,6 @@ module.exports = {
     sourceType: "module",
   },
   rules: {
-    "prettier/prettier": ["error", { trailingComma: "es5" }],
     "react/forbid-component-props": [
       "error",
       {

src/components/Accordion/Accordion.test.tsx

@@ -22,7 +22,7 @@ describe("Accordion", () => {
             content: <>More test content</>,
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("tablist")).toMatchSnapshot();
   });
@@ -37,11 +37,11 @@ describe("Accordion", () => {
           },
         ]}
         titleElement="h4"
-      />
+      />,
     );
     // Check for the specific element as defined in the titleElement prop.
     expect(
-      within(screen.getByRole("listitem")).getByRole("heading").tagName
+      within(screen.getByRole("listitem")).getByRole("heading").tagName,
     ).toBe("H4");
   });
 
@@ -60,7 +60,7 @@ describe("Accordion", () => {
             content: <>More test content</>,
           },
         ]}
-      />
+      />,
     );
     const tab = screen.getByRole("tab", { name: "Advanced topics" });
     await userEvent.click(tab);
@@ -86,7 +86,7 @@ describe("Accordion", () => {
             key: "networking",
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("tabpanel", { name: "Networking" })).toBeVisible();
   });

src/components/Accordion/Accordion.tsx

@@ -54,7 +54,7 @@ const generateSections = (
   sections: Section[],
   setExpanded,
   expanded,
-  titleElement
+  titleElement,
 ) =>
   sections.map(({ key, ...props }, i) => (
     <AccordionSection
@@ -98,7 +98,7 @@ const Accordion = ({
           sections,
           setExpanded,
           externallyControlled ? expanded : expandedSection,
-          titleElement
+          titleElement,
         )}
       </ul>
     </aside>

src/components/Accordion/AccordionSection/AccordionSection.test.tsx

@@ -12,7 +12,7 @@
         expanded="abcd-1234"
         setExpanded={jest.fn()}
         title="Test section"
-      />
+      />,
     );
 
     expect(screen.getByRole("listitem")).toMatchSnapshot();
@@ -26,7 +26,7 @@
         setExpanded={jest.fn()}
         title="Test section"
         titleElement="h4"
-      />
+      />,
     );
     // Query for the specific element as defined in the titleElement prop.
     // eslint-disable-next-line testing-library/no-node-access
@@ -47,7 +47,7 @@
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
     expect(onTitleClick).toHaveBeenCalledWith(true, ":r4:");
@@ -60,7 +60,7 @@
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     // Clicking the title again should close the accordion section.
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
@@ -81,7 +81,7 @@
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
 
@@ -100,10 +100,10 @@
             <span>optional</span>
           </>
         }
-      />
+      />,
     );
     const title = screen.getByRole("tab");
     expect(title.children).toHaveLength(2);
     expect(title).toHaveTextContent("Test section optional");
   });
 });

src/components/ActionButton/ActionButton.tsx

@@ -126,7 +126,7 @@ const ActionButton = ({
       "is-processing": showLoader || showSuccess,
       "is-disabled": disabled,
       "is-inline": inline,
-    }
+    },
   );
   const showIcon = showLoader || showSuccess;
   const icon = (showLoader && "spinner") || (showSuccess && "success") || null;

src/components/ApplicationLayout/ApplicationLayout.test.tsx

@@ -17,21 +17,21 @@
   const link = screen.getAllByRole("link", { name: "Juju" })[0];
   expect(within(link).getByRole("img", { name: "Juju" })).toHaveAttribute(
     "src",
-    "name.svg"
+    "name.svg",
   );
 });
 
 it("displays as light", () => {
   render(<ApplicationLayout dark={false} logo={logo} navItems={[]} />);
   expect(document.querySelectorAll(".is-dark")).toHaveLength(0);
   expect(document.querySelectorAll(".is-light")).toHaveLength(0);
 });
 
 it("displays as dark", () => {
   render(<ApplicationLayout dark logo={logo} navItems={[]} />);
   expect(document.querySelectorAll(".is-dark")).toHaveLength(5);
   // Two icons are light so that they appear over the dark background.
   expect(document.querySelectorAll(".is-light")).toHaveLength(2);
 });
 
 it("displays main content", () => {
@@ -39,7 +39,7 @@
   render(
     <ApplicationLayout logo={logo} navItems={[]}>
       {content}
-    </ApplicationLayout>
+    </ApplicationLayout>,
   );
   expect(screen.getByText(content)).toBeInTheDocument();
 });
@@ -58,17 +58,17 @@
       logo={logo}
       navItems={[]}
       aside={<AppAside>{content}</AppAside>}
-    />
+    />,
   );
   expect(screen.getByText(content)).toBeInTheDocument();
   expect(document.querySelector(".l-aside")).toBeInTheDocument();
 });
 
 it("pins the menu", async () => {
   render(<ApplicationLayout logo={logo} navItems={[]} />);
   expect(document.querySelector(".l-navigation")).not.toHaveClass("is-pinned");
   await userEvent.click(screen.getByRole("button", { name: "Pin menu" }));
   expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");
 });
 
 it("pins the menu using external state", async () => {
@@ -79,7 +79,7 @@
       navItems={[]}
       menuPinned={true}
       onPinMenu={onPinMenu}
-    />
+    />,
   );
   expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");
   await userEvent.click(screen.getByRole("button", { name: "Unpin menu" }));
@@ -91,7 +91,7 @@
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));
   expect(document.querySelector(".l-navigation")).not.toHaveClass(
-    "is-collapsed"
+    "is-collapsed",
   );
   await userEvent.click(screen.getByRole("button", { name: "Close menu" }));
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
@@ -105,7 +105,7 @@
       navItems={[]}
       menuCollapsed={true}
       onCollapseMenu={onCollapseMenu}
-    />
+    />,
   );
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));

src/components/ArticlePagination/ArticlePagination.test.tsx

@@ -11,7 +11,7 @@ describe("ArticlePagination ", () => {
         nextURL="#next"
         previousLabel="Lorem ipsum dolor sit amet"
         previousURL="#previous"
-      />
+      />,
     );
     expect(screen.getByRole("contentinfo")).toMatchSnapshot();
   });

src/components/Badge/Badge.test.tsx

@@ -29,23 +29,26 @@ it("rounds number correctly for thousands", () => {
 
 it("rounds number correctly for millions", () => {
   render(
-    <Badge value={132456455} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge value={132456455} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("132M")).toBeInTheDocument();
 });
 
 it("rounds number correctly for billions", () => {
   render(
-    <Badge value={13245645512} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge value={13245645512} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("13B")).toBeInTheDocument();
 });
 
 it("rounds number correctly for trillions", () => {
   render(
-    <Badge value={132456455123112} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge
+      value={132456455123112}
+      badgeType={BadgeType.ROUNDED_LARGE_NUMBER}
+    />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("132T")).toBeInTheDocument();
@@ -56,7 +59,7 @@ it("displays the correct max value if it exceeds 999T", () => {
     <Badge
       value={1324564551231125}
       badgeType={BadgeType.ROUNDED_LARGE_NUMBER}
-    />
+    />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("999T")).toBeInTheDocument();

src/components/Badge/Badge.tsx

@@ -72,7 +72,7 @@ const Badge = ({
       [`p-badge--negative`]: !!isNegative,
       "p-badge": !isNegative,
     },
-    className
+    className,
   );
 
   let safeValue = Math.round(value);

src/components/Button/Button.test.tsx

@@ -14,7 +14,7 @@ describe("Button ", () => {
     render(
       <Button element="a" href="http://example.com">
         Test content
-      </Button>
+      </Button>,
     );
     expect(screen.getByRole("link")).toMatchSnapshot();
   });
@@ -53,7 +53,7 @@ describe("Button ", () => {
         disabled={true}
         href="http://example.com"
         onClick={onClick}
-      />
+      />,
     );
     const button = screen.getByRole("link");
     expect(button).toHaveClass("is-disabled");
@@ -71,7 +71,7 @@ describe("Button ", () => {
         disabled={true}
         href="http://example.com"
         onClick={onClick}
-      />
+      />,
     );
     const button = screen.getByRole("link");
     const clickEvent = createEvent.click(button);
@@ -109,7 +109,7 @@ describe("Button ", () => {
   it("puts additional classes at the end", () => {
     render(<Button className="extra-class" dense />);
     expect(screen.getByRole("button").className).toEqual(
-      "p-button is-dense extra-class"
+      "p-button is-dense extra-class",
     );
   });
 
@@ -134,7 +134,7 @@ describe("Button ", () => {
     render(<Button element={Link} to="http://example.com" />);
     expect(screen.getByRole("link")).toHaveAttribute(
       "href",
-      "http://example.com"
+      "http://example.com",
     );
   });
 });

src/components/Button/Button.tsx

@@ -94,7 +94,7 @@ const Button = <P,>({
       "is-inline": inline,
       "is-small": small,
     },
-    className
+    className,
   );
   const onClickDisabled = (e: MouseEvent) => e.preventDefault();
 

src/components/Card/Card.test.tsx

@@ -12,7 +12,7 @@ describe("Card ", () => {
   it("can have a title", () => {
     render(<Card title="This is the title">Test content</Card>);
     expect(
-      screen.getByRole("group", { name: "This is the title" })
+      screen.getByRole("group", { name: "This is the title" }),
     ).toBeInTheDocument();
   });
 

src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx

@@ -6,7 +6,7 @@ import CheckableInput from "./CheckableInput";
 describe("CheckableInput ", () => {
   it("renders a checkable input", () => {
     render(
-      <CheckableInput inputType="checkbox" label="Test label"></CheckableInput>
+      <CheckableInput inputType="checkbox" label="Test label"></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBeInTheDocument();
   });
@@ -17,7 +17,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test disabled"
         disabled
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBeDisabled();
   });
@@ -28,7 +28,7 @@ describe("CheckableInput ", () => {
         inputType="radio"
         label="Test required"
         required
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("is-required");
@@ -40,7 +40,7 @@ describe("CheckableInput ", () => {
         inputType="radio"
         label="Test required"
         inline
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("p-radio--inline");
@@ -52,7 +52,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test label"
         indeterminate
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBePartiallyChecked();
   });
@@ -63,7 +63,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test label"
         labelClassName="label-class-name"
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("label-class-name");

src/components/CheckboxInput/CheckableInput/CheckableInput.tsx

@@ -54,7 +54,7 @@ const CheckableInput = ({
         `p-${inputType}${inline ? "--inline" : ""}`,
         {
           "is-required": checkboxProps.required,
-        }
+        },
       )}
     >
       <input

src/components/CheckboxInput/CheckboxInput.test.tsx

@@ -6,6 +6,6 @@ import CheckboxInput from "./CheckboxInput";
 it("renders a checkbox", () => {
   render(<CheckboxInput label="Test checkbox"></CheckboxInput>);
   expect(
-    screen.getByRole("checkbox", { name: "Test checkbox" })
+    screen.getByRole("checkbox", { name: "Test checkbox" }),
   ).toBeInTheDocument();
 });