fix(icons): fix added icons

.eslintrc.js

@@ -15,9 +15,9 @@ 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",
   ],
   // this is to disable
   // no-unused-var, no-extraneous-dependencies and prettier

.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/functional-tests-for-a-component.md

@@ -0,0 +1,24 @@
+---
+name: Functional tests for a component
+about: Use this template to create issues for writing functional tests for c...
+title: Functional tests for [Component]
+labels: ""
+assignees: ""
+---
+
+- [ ] Align with design, product, other engineers, if necessary, on what functionality to test
+- As a starting point, you can find the component in this doc: [Functional tests: Ideas for what to test per component](https://docs.google.com/document/d/1qKFFBWMBq0QMhRrk5-mgrZYI2QqiL-c9YLKi28w94Gg/edit#heading=h.aixehdk039ik)
+- [ ] Write the tests in the index.test.tsx for the component.
+
+### Tips for writing functional tests:
+
+- Consider the various types of [queries within the React Testing Library and when to use which](https://testing-library.com/docs/queries/about/#types-of-queries)
+- [React Testing Library Cheatsheet](https://testing-library.com/docs/react-testing-library/cheatsheet/)
+- [Guiding principles](https://testing-library.com/docs/guiding-principles/) from React Testing Library
+- Consider when to group test cases into a single test, for example “if search bar included, it appears in menu” can be combined with “if search bar included, entered text filters to exclude non-matches” in the same test
+
+### Tips for running the tests:
+
+- Make sure the test will fail when it should, too (or even make these test cases themselves to keep as permanent tests). For example, write a test such that if there should be an icon but there’s not, it will fail, in addition to writing a test for if there is an icon it will pass
+- To save time when running the tests, in Terminal, use the command `lerna run test -- [INSERT LOCAL PATH TO TEST FILE]` to limit the tests that are run to those within a given component’s test file only (e.g. `lerna run test -- /Users/quigley/sci-components/packages/components/src/core/Button/button.test.tsx` for running tests for the Button component only)
+- To save even more time and to help isolate an individual test when troubleshooting, you can limit to a single test to run within the component’s suite by adding `.only` directly after `it` for the particular test as such: `it.only(“...`

.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/ISSUE_TEMPLATE/visual-tests-for-a-component.md

@@ -0,0 +1,18 @@
+---
+name: Visual tests for a component
+about:
+  Use this template to create issues for writing visual (Chromatic) tests for
+  components
+title: Visual tests for [Component]
+labels: Test Cases Epic
+assignees: ""
+---
+
+- [ ] Align with design, product, and other engineers, if necessary, on what visual traits to include as permutation dimensions for the Chromatic test
+- As a starting point, you can find the component in this doc: [Chromatic tests: Which component dimensions to consider looping through](https://docs.google.com/document/d/1i40YV1rX61dNzGsqbhqJAD8PL1puCecX7rnHgD_FawE/edit#heading=h.s63zmnx3lqv1)
+- Permutation dimensions may include the component’s props, but it may not always be necessary to include every prop
+- If the component can be interacted with, or if part of it can (e.g. an “x” button or similar within it), it may need pseudo state as a permutation dimension. (The SDS codebase already has a [pseudo state addon for Storybook integrated](https://storybook.js.org/addons/storybook-addon-pseudo-states), but each relevant state will need to be looped through, see next bullet for an example.)
+
+- [ ] Write the tests in the index.stories.tsx for the component. See the [index.stories.tsx file for the Button component](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/Button/index.stories.tsx) for an example of how to structure the loops within the test, to ensure all relevant permutations are iterated through.
+- Name the test `ScreenshotTest`; this will result in a new page called “Screenshot Test” generated in Storybook for the component ()
+- `ScreenshotTest` should come after `Default` and `LivePreview` but before `Test`

.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
 

.github/workflows/chromatic.yml

@@ -1,31 +1,36 @@
-name: "Chromatic"
+name: "Chromatic Deployment"
 
-# Event for the workflow
+# Triggers on Push event on all branches, excluding the 'prod' branch
 on:
   push:
     branches-ignore:
       - prod
 
 jobs:
   chromatic-deployment:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest # Use the latest version of the Ubuntu runner environment
 
     steps:
-      # 👇 Version 2 of the action
+      # Step 1: Checkout the repository code
       - name: Checkout repository
         uses: actions/checkout@v3
         with:
-          fetch-depth: 0 # 👈 Required to retrieve git history
-      - uses: actions/setup-node@v3
+          fetch-depth: 0
+
+      # Step 2: Set up Node.js environment and cache Yarn dependencies
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version-file: ".node-version"
+          node-version-file: ".node-version" # Specify the Node.js version from '.node-version' file
+          cache: "yarn" # Cache Yarn dependencies for faster builds
+
+      # Step 3: Install project dependencies using Yarn
       - name: Install dependencies
         run: yarn
-        # 👇 Adds Chromatic as a step in the workflow
+
+      # Step 4: Publish the project to Chromatic
       - name: Publish to Chromatic
         uses: chromaui/action@v1
-        # Options required to the GitHub Chromatic Action
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }} # Authenticate using the GitHub token
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Provide the Chromatic project token for authentication

.github/workflows/commitlint.yml

@@ -1,5 +1,6 @@
 name: Lint PR commit
 
+# Triggers on pull requests with specific types
 on:
   pull_request:
     types:
@@ -10,10 +11,12 @@ on:
 
 jobs:
   main:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest # Use the latest version of the Ubuntu runner environment
+
     steps:
+      # Step 1: Use the 'amannn/action-semantic-pull-request' action to validate the PR commit
       - uses: amannn/[email protected]
         with:
-          validateSingleCommit: true
+          validateSingleCommit: true # Specify to validate a single commit
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Authenticate using the GitHub token

.github/workflows/namespace-check.yml

@@ -1,24 +1,35 @@
-# .github/workflows/namespace-check.yml
-
 name: "Namespace Check"
+
+# Triggers on push event on all branches, excluding the 'prod' branch
 on:
   push:
     branches-ignore:
-      - prod
+      - prod # Exclude the 'prod' branch from triggering this workflow
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
+  namespace-check:
+    runs-on: ubuntu-latest # Use the latest version of the Ubuntu runner environment
+
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+      # Step 1: Check out the repository code
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Step 2: Set up Node.js environment and cache Yarn dependencies
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".node-version" # Specify the Node.js version from '.node-version' file
+          cache: "yarn" # Cache Yarn dependencies for faster builds
 
-      - uses: actions/checkout@v3
-      - uses: bahmutov/npm-install@v1
+      # Step 3: Install project dependencies using Yarn
+      - name: Install dependencies
+        run: yarn
 
+      # Step 4: Build the component library in 'dist/' directory
       - name: Build component library in dist/
         run: yarn build
 
+      # Step 5: Run the Namespace Checking script
       - name: Namespace Checking
         run: yarn namespace-check