Merge branch 'main' into 709-update-contributionmd

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
     "plugin:jsx-a11y/recommended",
     "airbnb-typescript",
     "plugin:sonarjs/recommended",
-    "plugin:jest-playwright/recommended",
     "plugin:storybook/recommended",
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Security Issues
+    url: mailto:[email protected]
+    about: Please responsibly disclose security issues by emailing us at [email protected].

.github/ISSUE_TEMPLATE/request-new-component.yml

@@ -0,0 +1,50 @@
+name: Request new SDS component
+description: Request a component be added to SDS
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for requesting a new component in the SDS! Please fill out the following information about the requested component.
+  - type: input
+    id: component-name
+    attributes:
+      label: Component Name
+      description: A name for the desired component.
+    validations:
+      required: true
+  - type: textarea
+    id: component-requirements
+    attributes:
+      label: Component Requirements
+      description: A list of requirements for the component.
+    validations:
+      required: true
+  - type: input
+    id: mui-base-component
+    attributes:
+      label: MUI Base Component (if applicable)
+      description: If the component is based on a Material-UI component, please specify.
+      placeholder: e.g., MUI Button
+    validations:
+      required: false
+  - type: input
+    id: teams-requesting
+    attributes:
+      label: Team(s) Requesting
+      description: The team(s) that need this component.
+    validations:
+      required: true
+  - type: input
+    id: component-needed-by
+    attributes:
+      label: Component Needed By
+      description: The date by which the component is needed.
+    validations:
+      required: true
+  - type: input
+    id: component-screenshot
+    attributes:
+      label: Component Screenshot / Prototype
+      description: A link to a screenshot or prototype of the component.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/request-support.yml

@@ -0,0 +1,21 @@
+name: Request support
+description: Request support for a SDS component
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please fill out the form below to request help with a SDS component.
+  - type: input
+    id: component-name
+    attributes:
+      label: Component Name
+      description: Component that help request is for.
+    validations:
+      required: true
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Issue description
+      description: Details about the issue with the component.
+    validations:
+      required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,7 @@
 
 **Structural Element (Base, Gene, DNA, Chromosome or Cell)**
 Github issue: [#XXXX](link)
-Copy isuue descirption here
+Copy issue description here
 
 ## Checklist
 

jest.common.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   moduleDirectories: ["node_modules", "<rootDir>"],
   preset: "ts-jest",
-  setupFiles: ["jest-canvas-mock", "../../intersectionObserverMock.js"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],
   testEnvironment: "jsdom",
   transform: {
     "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":

package.json

@@ -36,6 +36,7 @@
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/babel__core": "^7.20.1",
@@ -71,7 +72,6 @@
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jest-playwright": "^0.9.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",

packages/components/jest.setup.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "../../intersectionObserverMock";

packages/components/src/core/Accordion/index.test.tsx

@@ -1,29 +1,41 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
-import { composeStory } from "@storybook/react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import * as snapshotTestStoryFile from "./index.stories";
-import Meta, { Test as TestStory } from "./index.stories";
+import { composeStories } from "@storybook/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import * as stories from "./index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
-const Test = composeStory(TestStory, Meta);
+const { Test } = composeStories(stories);
 
 describe("<Accordion />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots(stories);
 
   it("renders accordion component", () => {
-    render(<Test {...Test.args} />);
+    render(<Test />);
     const accordionElement = screen.getByTestId("accordion");
     expect(accordionElement).not.toBeNull();
   });
 
-  it("opens accordion when clicked", () => {
+  it("opens and closes the accordion when clicked", async () => {
+    const ariaExpanded = "aria-expanded";
+
     render(<Test />);
-    const accordionElement = screen.getByTestId("accordion");
-    fireEvent.click(accordionElement);
-    expect(
-      screen.getAllByText(
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
-      )
-    ).not.toBeNull();
+
+    // Starts closed
+    const accordionHeader = screen.getByRole("button");
+    expect(accordionHeader).toHaveAttribute(ariaExpanded, "false");
+    expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();
+
+    // It opens when clicked.
+    fireEvent.click(accordionHeader);
+    expect(accordionHeader).toHaveAttribute(ariaExpanded, "true");
+    expect(screen.getByText(/Lorem ipsum/)).toBeVisible();
+
+    // And closes when clicked again.
+    fireEvent.click(accordionHeader);
+    expect(accordionHeader).toHaveAttribute(ariaExpanded, "false");
+
+    await waitFor(() => {
+      expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();
+    });
   });
 });

packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             
             <button
               aria-label="search-button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1fqpm4w-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-5z5hxc-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >

packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fkerv1-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-co4rz1-MuiButtonBase-root-MuiIconButton-root"
     tabindex="0"
     type="button"
   >

packages/components/src/core/Button/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-ok6hdy-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1pykspm-MuiButtonBase-root-MuiButton-root"
   tabindex="0"
   text="Label"
   type="button"

packages/components/src/core/Button/style.ts

@@ -7,13 +7,15 @@ import {
   getCorners,
   getSpaces,
 } from "../styles";
+import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
 
 const sdsPropNames = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];
 
 const ButtonBase = styled(Button, {
   shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
 })`
   box-shadow: none;
+  ${focusVisibleA11yStyle}
   ${(props) => {
     const { variant } = props;
     const colors = getColors(props);
@@ -40,10 +42,6 @@ const ButtonBase = styled(Button, {
         background-color: ${colors?.primary[500]};
         box-shadow: none;
       }
-      &:focus-visible {
-        outline: 5px auto Highlight;
-        outline: 5px auto -webkit-focus-ring-color;
-      }
       &:active {
         color: white;
         background-color: ${colors?.primary[600]};
@@ -85,6 +83,8 @@ interface IsAllCaps extends CommonThemeProps {
 const MinimalButton = styled(Button, {
   shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
 })`
+  ${focusVisibleA11yStyle}
+
   ${(props: IsAllCaps) => {
     const spacings = getSpaces(props);
 
@@ -102,10 +102,6 @@ const MinimalButton = styled(Button, {
   &:hover, &:focus-visible {
     background-color: transparent;
   }
-  &:focus-visible {
-    outline: 5px auto Highlight;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
 `;
 
 const minimal = (props: CommonThemeProps) => {
@@ -145,10 +141,7 @@ interface IsRounded extends CommonThemeProps {
 export const StyledButton = styled(Button, {
   shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
 })`
-  &:focus-visible {
-    outline: 5px auto Highlight;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
+  ${focusVisibleA11yStyle}
   ${(props: IsRounded) => {
     if (!props.isRounded) return ``;
 

packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
   icon="[object Object]"
   tabindex="0"
   type="button"

packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
 <button
   aria-label="info"
-  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-7000mn-MuiButtonBase-root-MuiIconButton-root"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1dufxsi-MuiButtonBase-root-MuiIconButton-root"
   tabindex="0"
   type="button"
 >

packages/components/src/core/ButtonIcon/style.ts

@@ -5,7 +5,12 @@ import {
   SDSWarningTypes,
   showWarningIfFirstOccurence,
 } from "src/common/warnings";
-import { CommonThemeProps, getColors, getIconSizes } from "../styles";
+import {
+  CommonThemeProps,
+  focusVisibleA11yStyle,
+  getColors,
+  getIconSizes,
+} from "../styles";
 
 export interface ButtonIconSizeToTypes {
   small: "primary" | "secondary" | "tertiary";
@@ -174,11 +179,7 @@ export const StyledButtonIcon = styled(IconButton, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   padding: 0;
-
-  :focus-visible {
-    outline: 5px auto Highlight;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
+  ${focusVisibleA11yStyle}
 
   ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
     props: ButtonIconExtraProps<ButtonIconSize>