test(icons): fix snapshot test (#3824)

* test(icons): fix snapshot test * docs(icons): update self service instructions * chore(icons): fix biome formatting issues
twilio-labs · Mar 18, 2024 · 307631c · 307631c
1 parent c04a38a
commit 307631c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -143,6 +143,7 @@ Array [
   "ProcessNeutralIcon",
   "ProcessSuccessIcon",
   "ProcessWarningIcon",
+  "ProductAIAssistantsIcon",
   "ProductAPIExplorerIcon",
   "ProductAddOnsIcon",
   "ProductAdminAccessControlIcon",

diff --git a/packages/paste-icons/src/ProductAIAssistantsIcon.tsx b/packages/paste-icons/src/ProductAIAssistantsIcon.tsx
@@ -1,23 +1,23 @@
+import { useUID } from "@twilio-paste/uid-library";
 /**
  * This file was automatically generated with @twilio-labs/svg-to-react
  */
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
+import * as React from "react";
 
-import {IconWrapper} from './helpers/IconWrapper';
-import type {IconWrapperProps} from './helpers/IconWrapper';
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
 
 export interface ProductAIAssistantsIconProps extends IconWrapperProps {
   title?: string;
   decorative: boolean;
 }
 
 const ProductAIAssistantsIcon = React.forwardRef<HTMLElement, ProductAIAssistantsIconProps>(
-  ({as, display, element = 'ICON', size, color, title, decorative}, ref) => {
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
     const titleId = `ProductAIAssistantsIcon-${useUID()}`;
 
     if (!decorative && title == null) {
-      throw new Error('[ProductAIAssistantsIcon]: Missing a title for non-decorative icon.');
+      throw new Error("[ProductAIAssistantsIcon]: Missing a title for non-decorative icon.");
     }
 
     return (
@@ -44,8 +44,8 @@ const ProductAIAssistantsIcon = React.forwardRef<HTMLElement, ProductAIAssistant
         </svg>
       </IconWrapper>
     );
-  }
+  },
 );
 
-ProductAIAssistantsIcon.displayName = 'ProductAIAssistantsIcon';
-export {ProductAIAssistantsIcon};
+ProductAIAssistantsIcon.displayName = "ProductAIAssistantsIcon";
+export { ProductAIAssistantsIcon };
diff --git a/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx b/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx
@@ -119,10 +119,11 @@ Once the icon is designed and exported, we need to get it in the hands of our de
 3. Navigate inside the newly cloned repository with cd paste
 4. Install the dependencies with yarn install
 5. Add all the new svg icon files into the packages/paste-icons/svg/ folder.
-6. From the root Paste folder, run the following command in your terminal: `yarn workspace @twilio-paste/icons convert`
+6. From the root Paste folder, run the following commands in your terminal: `yarn workspace @twilio-paste/icons convert-new` and `yarn workspace @twilio-paste/icons list-icons`
 7. Verify your new icons were added correctly by checking the packages/paste-icons/src folder to see the newly created source files.
 8. Create a changeset to document your updates by running `yarn changeset`.
-9. Commit your changes and submit a new PR on Github!
+9. Update the snapshot tests with `yarn jest --u`.
+10. Commit your changes and submit a new PR on Github!
 
 ## Troubleshooting