Chore: Icons (#3962)

* chore(icons): updated initial 3 icons * chore(icons): updated package after build * feat(icons): added 4 new icons * feat(icons): added changelog * chore(icons): fix lint issues * chore(icons): update tests snapshot * chore(incons): revert small cahnge test for vercel
twilio-labs · Jun 24, 2024 · b5e6d3f · b5e6d3f
1 parent 26c279e
commit b5e6d3f
Show file tree

Hide file tree

Showing 19 changed files with 352 additions and 12 deletions.
diff --git a/.changeset/tender-lobsters-cough.md b/.changeset/tender-lobsters-cough.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": minor
+"@twilio-paste/icons": minor
+---
+
+[Icons] Added 5 new icons: AuthenticationIcon, TemplateMessageIcon, TriggerIcon, ProductUnifiedProfilesIcon and UnstarIcon. Also updated 2 icons: ProductSupportIcon and SupportIcon
diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -17,6 +17,7 @@ Array [
   "ArtificialIntelligenceIcon",
   "AttachIcon",
   "AttachmentIcon",
+  "AuthenticationIcon",
   "AutomaticUpdatesIcon",
   "AvailableIcon",
   "BoldIcon",
@@ -241,6 +242,7 @@ Array [
   "ProductTwiMLBinsIcon",
   "ProductTwilioOrgIcon",
   "ProductUSSDIcon",
+  "ProductUnifiedProfilesIcon",
   "ProductUnifyIcon",
   "ProductUsageIcon",
   "ProductVerifyIcon",
@@ -284,6 +286,7 @@ Array [
   "SupportIcon",
   "SystemStatusIcon",
   "TaskIcon",
+  "TemplateMessageIcon",
   "TextAlignCenterIcon",
   "TextAlignJustifyIcon",
   "TextAlignLeftIcon",
@@ -302,13 +305,15 @@ Array [
   "TranslationIcon",
   "TrendDownIcon",
   "TrendUpIcon",
+  "TriggerIcon",
   "UnarchiveIcon",
   "UnderlineIcon",
   "UndoIcon",
   "UnlockIcon",
   "UnorderedListIcon",
   "UnpinIcon",
   "UnsortedIcon",
+  "UnstarIcon",
   "UnsubscribeIcon",
   "UploadIcon",
   "UploadToCloudIcon",

diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js
diff --git a/packages/paste-icons/json/icons.json b/packages/paste-icons/json/icons.json
diff --git a/packages/paste-icons/src/AuthenticationIcon.tsx b/packages/paste-icons/src/AuthenticationIcon.tsx
@@ -0,0 +1,53 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface AuthenticationIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const AuthenticationIcon = React.forwardRef<HTMLElement, AuthenticationIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `AuthenticationIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[AuthenticationIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            d="M13.106 7.281a.5.5 0 1 0-.8-.6l-2.64 3.52-1.583-1.583a.5.5 0 1 0-.707.707l1.585 1.585a.997.997 0 0 0 1.503-.107l2.642-3.522Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.429 2.5A1.429 1.429 0 0 0 3 3.929v5.573c0 .868.324 1.724.794 2.513.472.792 1.109 1.549 1.78 2.228C6.919 15.602 8.45 16.7 9.23 17.204a1.414 1.414 0 0 0 1.544 0c.78-.504 2.312-1.602 3.656-2.96.672-.68 1.31-1.437 1.78-2.23.47-.788.795-1.644.795-2.512V3.93a1.429 1.429 0 0 0-1.43-1.429H4.43Zm-.303 1.126c.08-.08.19-.126.303-.126h11.147a.429.429 0 0 1 .429.429v5.573c0 .623-.236 1.3-.654 2.001-.416.7-.994 1.392-1.632 2.037-1.277 1.291-2.746 2.345-3.489 2.825l-.001.001a.415.415 0 0 1-.453 0h-.002c-.742-.481-2.211-1.535-3.488-2.826-.638-.645-1.217-1.338-1.633-2.037-.417-.702-.653-1.378-.653-2V3.928c0-.114.045-.223.126-.303Z"
+            fill="currentColor"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+AuthenticationIcon.displayName = "AuthenticationIcon";
+export { AuthenticationIcon };
diff --git a/packages/paste-icons/src/ProductSupportIcon.tsx b/packages/paste-icons/src/ProductSupportIcon.tsx
@@ -36,7 +36,7 @@ const ProductSupportIcon = React.forwardRef<HTMLElement, ProductSupportIconProps
           <path
             fill="currentColor"
             fillRule="evenodd"
-            d="M1.4 10a8.6 8.6 0 1117.2 0 8.6 8.6 0 01-17.2 0zM10 2.6a7.4 7.4 0 100 14.8 7.4 7.4 0 000-14.8zm.23 3.713a2.01 2.01 0 00-2.239 2v.6l-1.2.002v-.6a3.21 3.21 0 113.903 3.13l-.013.002a.1.1 0 00-.081.096v.957H9.4v-.97a1.301 1.301 0 011.04-1.258 2.01 2.01 0 00-.21-3.959zm-1.003 8.139a.774.774 0 111.548 0 .774.774 0 01-1.548 0z"
+            d="M1.5 10a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0ZM10 2.686a7.314 7.314 0 1 0 0 14.628 7.314 7.314 0 0 0 0-14.628Zm.227 3.67a1.987 1.987 0 0 0-2.213 1.977l.001.593-1.186.002v-.594a3.173 3.173 0 1 1 3.857 3.094l-.013.003a.1.1 0 0 0-.08.094v.946H9.407v-.96a1.286 1.286 0 0 1 1.028-1.242 1.986 1.986 0 0 0-.208-3.913Zm-.99 8.044a.765.765 0 1 1 1.529 0 .765.765 0 0 1-1.53 0Z"
             clipRule="evenodd"
           />
         </svg>

diff --git a/packages/paste-icons/src/ProductUnifiedProfilesIcon.tsx b/packages/paste-icons/src/ProductUnifiedProfilesIcon.tsx
@@ -0,0 +1,67 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface ProductUnifiedProfilesIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ProductUnifiedProfilesIcon = React.forwardRef<HTMLElement, ProductUnifiedProfilesIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `ProductUnifiedProfilesIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[ProductUnifiedProfilesIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.513 9.297a2.578 2.578 0 0 1-1.251-2.202c0-1.428 1.18-2.588 2.631-2.588 1.451 0 2.631 1.16 2.631 2.588a2.58 2.58 0 0 1-1.21 2.177c1.728.563 2.98 2.168 2.98 4.054 0 .313-.26.569-.579.569H6.186a.575.575 0 0 1-.578-.569c0-1.859 1.215-3.444 2.905-4.03Zm-.095-2.202c0-.796.66-1.45 1.475-1.45.81 0 1.475.654 1.475 1.45 0 .796-.665 1.45-1.475 1.45s-1.475-.654-1.475-1.45Zm1.539 3.098c1.56 0 2.862 1.11 3.134 2.565H6.822c.272-1.456 1.573-2.565 3.135-2.565Z"
+            fill="currentColor"
+          />
+          <path
+            d="M2.076 12.001c.914 3.499 4.149 5.993 7.875 5.993V18c3.66 0 6.887-2.428 7.847-5.902a.564.564 0 0 0-.405-.7.579.579 0 0 0-.711.399c-.821 2.98-3.585 5.06-6.731 5.06-3.097 0-5.802-2.006-6.68-4.866a.584.584 0 0 0 .4-.285.552.552 0 0 0-.017-.58l-.544-.83c-.214-.33-.763-.33-.977 0l-.544.83a.565.565 0 0 0-.017.58c.103.18.292.294.504.295Z"
+            clipRule="evenodd"
+          />
+          <path
+            d="M9.95 3.137c3.173 0 5.947 2.141 6.746 5.095a.584.584 0 0 0-.367.278.552.552 0 0 0 .017.58l.544.83a.572.572 0 0 0 .486.262h.005a.572.572 0 0 0 .486-.262l.544-.83a.564.564 0 0 0 .017-.58.583.583 0 0 0-.509-.295h-.037C17.048 4.632 13.748 2 9.951 2 6.14 2 2.798 4.655 2 8.317a.58.58 0 0 0 1.133.239c.683-3.139 3.377-5.419 6.818-5.419Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.513 9.297a2.578 2.578 0 0 1-1.251-2.202c0-1.428 1.18-2.588 2.631-2.588 1.451 0 2.631 1.16 2.631 2.588a2.58 2.58 0 0 1-1.21 2.177c1.728.563 2.98 2.168 2.98 4.054 0 .313-.26.569-.579.569H6.186a.575.575 0 0 1-.578-.569c0-1.859 1.215-3.444 2.905-4.03Zm-.095-2.202c0-.796.66-1.45 1.475-1.45.81 0 1.475.654 1.475 1.45 0 .796-.665 1.45-1.475 1.45s-1.475-.654-1.475-1.45Zm1.539 3.098c1.56 0 2.862 1.11 3.134 2.565H6.822c.272-1.456 1.573-2.565 3.135-2.565Z"
+            fill="currentColor"
+          />
+          <path
+            d="M2.076 12.001c.914 3.499 4.149 5.993 7.875 5.993V18c3.66 0 6.887-2.428 7.847-5.902a.564.564 0 0 0-.405-.7.579.579 0 0 0-.711.399c-.821 2.98-3.585 5.06-6.731 5.06-3.097 0-5.802-2.006-6.68-4.866a.584.584 0 0 0 .4-.285.552.552 0 0 0-.017-.58l-.544-.83c-.214-.33-.763-.33-.977 0l-.544.83a.565.565 0 0 0-.017.58c.103.18.292.294.504.295Z"
+            fill="currentColor"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+ProductUnifiedProfilesIcon.displayName = "ProductUnifiedProfilesIcon";
+export { ProductUnifiedProfilesIcon };
diff --git a/packages/paste-icons/src/SupportIcon.tsx b/packages/paste-icons/src/SupportIcon.tsx
@@ -36,7 +36,7 @@ const SupportIcon = React.forwardRef<HTMLElement, SupportIconProps>(
           <path
             fill="currentColor"
             fillRule="evenodd"
-            d="M1.4 10a8.6 8.6 0 1117.2 0 8.6 8.6 0 01-17.2 0zM10 2.6a7.4 7.4 0 100 14.8 7.4 7.4 0 000-14.8zm.23 3.713a2.01 2.01 0 00-2.239 2v.6l-1.2.002v-.6a3.21 3.21 0 113.903 3.13l-.013.002a.1.1 0 00-.081.096v.957H9.4v-.97a1.301 1.301 0 011.04-1.258 2.01 2.01 0 00-.21-3.959zm-1.003 8.139a.774.774 0 111.548 0 .774.774 0 01-1.548 0z"
+            d="M1.5 10a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0ZM10 2.686a7.314 7.314 0 1 0 0 14.628 7.314 7.314 0 0 0 0-14.628Zm.227 3.67a1.987 1.987 0 0 0-2.213 1.977l.001.593-1.186.002v-.594a3.173 3.173 0 1 1 3.857 3.094l-.013.003a.1.1 0 0 0-.08.094v.946H9.407v-.96a1.286 1.286 0 0 1 1.028-1.242 1.986 1.986 0 0 0-.208-3.913Zm-.99 8.044a.765.765 0 1 1 1.529 0 .765.765 0 0 1-1.53 0Z"
             clipRule="evenodd"
           />
         </svg>

diff --git a/packages/paste-icons/src/TemplateMessageIcon.tsx b/packages/paste-icons/src/TemplateMessageIcon.tsx
@@ -0,0 +1,49 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface TemplateMessageIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const TemplateMessageIcon = React.forwardRef<HTMLElement, TemplateMessageIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `TemplateMessageIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[TemplateMessageIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M3 4.518c0-.28.224-.506.5-.506h9.842c.276 0 .5.227.5.506V8.3c0 .28.224.506.5.506s.5-.227.5-.506V4.518A1.51 1.51 0 0 0 13.342 3H3.5C2.672 3 2 3.68 2 4.518v5.167a1.51 1.51 0 0 0 1.5 1.518h.579c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506H3.5a.503.503 0 0 1-.5-.506V4.518Zm3.158 6.392c0-.28.224-.506.5-.506h.984c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-.984c-.829 0-1.5.68-1.5 1.518v.916c0 .28.224.506.5.506s.5-.226.5-.506v-.916Zm4.437-1.518c-.276 0-.5.226-.5.506s.224.506.5.506h1.968c.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-1.968Zm4.92 0c-.275 0-.5.226-.5.506s.225.506.5.506h.985c.276 0 .5.226.5.506v.873c0 .28.224.507.5.507s.5-.227.5-.506v-.874a1.51 1.51 0 0 0-1.5-1.518h-.984ZM18 14.404a.503.503 0 0 0-.5-.506c-.276 0-.5.227-.5.506v.874c0 .28-.224.506-.5.506h-.905c-.276 0-.5.226-.5.506s.224.506.5.506h.905c.828 0 1.5-.68 1.5-1.518v-.874Zm-11.842.17a.503.503 0 0 0-.5-.505c-.276 0-.5.226-.5.506v.916c0 .72.577 1.305 1.29 1.305.276 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506.291.291 0 0 1-.29-.293v-.916Zm5.816 1.21c-.277 0-.5.226-.5.506s.223.506.5.506h1.974c.275 0 .5-.227.5-.506a.503.503 0 0 0-.5-.506h-1.975ZM6.053 7.1a.794.794 0 0 1-.79.8.794.794 0 0 1-.79-.8c0-.44.354-.799.79-.799.436 0 .79.358.79.8Zm2.368.8c.436 0 .79-.358.79-.8a.794.794 0 0 0-.79-.799.794.794 0 0 0-.79.8c0 .44.354.798.79.798Zm3.947-.8a.794.794 0 0 1-.79.8.794.794 0 0 1-.788-.8c0-.44.353-.799.789-.799.436 0 .79.358.79.8Zm-4.342 9.482c.276 0 .5.226.5.506v.704l.23-.14.987-.599a.497.497 0 0 1 .686.174.51.51 0 0 1-.172.694l-.987.6-.608.369a.75.75 0 0 1-1.136-.651v-1.151c0-.28.224-.506.5-.506Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+TemplateMessageIcon.displayName = "TemplateMessageIcon";
+export { TemplateMessageIcon };
diff --git a/packages/paste-icons/src/TriggerIcon.tsx b/packages/paste-icons/src/TriggerIcon.tsx
@@ -0,0 +1,49 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface TriggerIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const TriggerIcon = React.forwardRef<HTMLElement, TriggerIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `TriggerIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[TriggerIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            d="M11.557 2.045a.5.5 0 0 1 .278.575l-1.327 5.358h4.231a.5.5 0 0 1 .415.78L9.067 17.78a.5.5 0 0 1-.905-.38l1.095-5.378H5a.5.5 0 0 1-.409-.788l6.35-9.022a.5.5 0 0 1 .616-.167Zm-5.594 8.977H9.87a.5.5 0 0 1 .49.6l-.716 3.514 4.155-6.158h-3.93a.5.5 0 0 1-.485-.62l.84-3.389-4.26 6.053Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+TriggerIcon.displayName = "TriggerIcon";
+export { TriggerIcon };
diff --git a/packages/paste-icons/src/UnstarIcon.tsx b/packages/paste-icons/src/UnstarIcon.tsx
@@ -0,0 +1,49 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface UnstarIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const UnstarIcon = React.forwardRef<HTMLElement, UnstarIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `UnstarIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[UnstarIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            d="M11.342 2.813a.98.98 0 0 1 .061.146l1.32 4.035h3.82a1.507 1.507 0 0 1 .868.303 1.486 1.486 0 0 1 .553 1.505 1.48 1.48 0 0 1-.495.807l-3.288 2.55 1.42 3.885c.01.028.02.055.027.084a1.477 1.477 0 0 1-.505 1.538 1.511 1.511 0 0 1-1.753.098l-3.376-2.37-3.372 2.318a1.516 1.516 0 0 1-1.744-.104 1.49 1.49 0 0 1-.506-1.54.983.983 0 0 1 .027-.086l1.418-3.828L2.532 9.61a1.481 1.481 0 0 1-.441-1.64c.097-.266.27-.5.498-.672a1.507 1.507 0 0 1 .868-.303h3.82l1.32-4.035a.985.985 0 0 1 .062-.146 1.5 1.5 0 0 1 .555-.594 1.518 1.518 0 0 1 2.128.594Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+UnstarIcon.displayName = "UnstarIcon";
+export { UnstarIcon };
diff --git a/packages/paste-icons/svg/Authentication.svg b/packages/paste-icons/svg/Authentication.svg
diff --git a/packages/paste-icons/svg/ProductSupport.svg b/packages/paste-icons/svg/ProductSupport.svg
diff --git a/packages/paste-icons/svg/ProductUnifiedProfiles.svg b/packages/paste-icons/svg/ProductUnifiedProfiles.svg