feat(icons): add new icons (#3903)

twilio-labs · May 15, 2024 · 5bb1b01 · 5bb1b01
1 parent ec901c2
commit 5bb1b01
Show file tree

Hide file tree

Showing 23 changed files with 595 additions and 6 deletions.
diff --git a/.changeset/green-spoons-listen.md b/.changeset/green-spoons-listen.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/icons": minor
+"@twilio-paste/core": minor
+---
+
+[Icons] add 8 new icons: CartIcon, CustomerCareIcon, PaymentIcon, RepeatPurchaseIcon, TransferIcon, UpsellIcon, WinbackIcon, and ProductAccountDashboardIcon, and modify 1 existing icon: ProductAdminAccountsIcon.
diff --git a/packages/paste-core/core-bundle/side-panel/package.json b/packages/paste-core/core-bundle/side-panel/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@twilio-paste-core/side-panel",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "main": "../dist/side-panel.js",
+  "types": "../dist/side-panel.d.ts"
+}
diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -33,6 +33,7 @@ Array [
   "CallIncomingIcon",
   "CallOutgoingIcon",
   "CallTransferIcon",
+  "CartIcon",
   "ChatIcon",
   "CheckboxCheckIcon",
   "CheckboxLineIcon",
@@ -64,6 +65,7 @@ Array [
   "CopyIcon",
   "CreditCardIcon",
   "CustomIcon",
+  "CustomerCareIcon",
   "DarkModeIcon",
   "DataArrayIcon",
   "DataBarChartIcon",
@@ -138,6 +140,7 @@ Array [
   "OrderedListIcon",
   "OutOfDateIcon",
   "PauseIcon",
+  "PaymentIcon",
   "PinIcon",
   "PlayIcon",
   "PlusIcon",
@@ -150,6 +153,7 @@ Array [
   "ProcessWarningIcon",
   "ProductAIAssistantsIcon",
   "ProductAPIExplorerIcon",
+  "ProductAccountDashboardIcon",
   "ProductAddOnsIcon",
   "ProductAdminAccessControlIcon",
   "ProductAdminAccountsIcon",
@@ -248,6 +252,7 @@ Array [
   "RedoIcon",
   "RefreshIcon",
   "RepeatIcon",
+  "RepeatPurchaseIcon",
   "ResetIcon",
   "SMSCapableIcon",
   "SMSIcon",
@@ -293,6 +298,7 @@ Array [
   "TipIcon",
   "TokenIcon",
   "TourIcon",
+  "TransferIcon",
   "TranslationIcon",
   "TrendDownIcon",
   "TrendUpIcon",
@@ -306,6 +312,7 @@ Array [
   "UnsubscribeIcon",
   "UploadIcon",
   "UploadToCloudIcon",
+  "UpsellIcon",
   "UserIcon",
   "UsersIcon",
   "VideoOffIcon",
@@ -316,6 +323,7 @@ Array [
   "VolumeOnIcon",
   "WarningIcon",
   "WebCapableIcon",
+  "WinbackIcon",
   "ZoomInIcon",
 ]
 `;
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/CartIcon.tsx b/packages/paste-icons/src/CartIcon.tsx
@@ -0,0 +1,61 @@
+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 CartIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CartIcon = React.forwardRef<HTMLElement, CartIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CartIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CartIcon]: 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}
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.984 2.83a.555.555 0 00-.547.46m0 0l-1.88 11.05a1.585 1.585 0 01-1.562 1.319H5.923a.515.515 0 010-1.03h7.072a.555.555 0 00.547-.461l1.88-11.05A1.585 1.585 0 0116.984 1.8h.701a.515.515 0 010 1.03h-.701M7.26 17.263a.247.247 0 100-.495v-.534a.782.782 0 100 1.563v-.534z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.26 16.234a.782.782 0 110 1.563v-.534a.247.247 0 010-.495v-.534zM12.606 17.263a.247.247 0 000-.495v-.534a.782.782 0 100 1.563v-.534z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.606 16.234a.782.782 0 110 1.563v-.534a.247.247 0 010-.495v-.534zM3.25 6.032a.02.02 0 00-.02.016v.01l1.034 4.134a1.624 1.624 0 001.575 1.23h8.605a.515.515 0 010 1.029H5.839a2.654 2.654 0 01-2.574-2.01L2.231 6.308A1.05 1.05 0 013.25 5.003h12.285a.515.515 0 010 1.03H3.25z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CartIcon.displayName = "CartIcon";
+export { CartIcon };
diff --git a/packages/paste-icons/src/CustomerCareIcon.tsx b/packages/paste-icons/src/CustomerCareIcon.tsx
@@ -0,0 +1,61 @@
+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 CustomerCareIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CustomerCareIcon = React.forwardRef<HTMLElement, CustomerCareIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CustomerCareIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CustomerCareIcon]: 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}
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.753 3.782l.086-.181a3.026 3.026 0 014.773-.75l.388.377.39-.379a3.027 3.027 0 014.153-.048l.127.124c.146.152.276.317.395.508l.1.174a2.86 2.86 0 01-.555 3.366l-3.574 3.622a1.455 1.455 0 01-2.06.013L5.269 6.845a2.87 2.87 0 01-.515-3.063zm4.237-.288a2.15 2.15 0 00-.477-.347l-.137-.067c-1.012-.452-2.217-.051-2.737.921l-.068.146c-.318.749-.141 1.62.457 2.195l3.571 3.623.086.072c.22.149.52.125.713-.07l3.583-3.63a1.964 1.964 0 00.399-2.301l-.082-.141a2.131 2.131 0 00-3.286-.402l-.7.68a.448.448 0 01-.624 0l-.698-.679z"
+          />
+          <path
+            fill="currentColor"
+            d="M3.455 9.14c.76 0 1.385.585 1.449 1.33l.005.125v2.518a.448.448 0 01-.888.08l-.007-.08v-2.518a.56.56 0 00-1.113-.082l-.006.082v3.472c0 .52.157 1.025.443 1.445l.113.153 1.352 1.598a.447.447 0 01-.626.635l-.057-.056-1.36-1.608a3.47 3.47 0 01-.753-1.953L2 14.067v-3.472c0-.803.652-1.454 1.455-1.454z"
+          />
+          <path
+            fill="currentColor"
+            d="M4.686 12.01a1.385 1.385 0 011.821.346l.84 1.256c.338.507.536 1.093.576 1.699l.007.228v2.013a.448.448 0 01-.888.08l-.007-.08V15.54c0-.446-.115-.883-.333-1.268l-.1-.162-.777-1.165a.492.492 0 00-.601-.203l-.085.042-.01.006a.5.5 0 00-.21.522l.027.075.908 1.51a.447.447 0 01-.72.526l-.048-.065-.925-1.542a1.388 1.388 0 01.367-1.693l.135-.097.023-.014zM16.546 9.14c.76 0 1.385.585 1.449 1.33l.005.125v3.472a3.47 3.47 0 01-.637 2.002l-.13.174-1.353 1.599a.448.448 0 01-.73-.512l.047-.067 1.344-1.588c.325-.406.518-.9.557-1.414l.007-.194v-3.472a.56.56 0 00-1.113-.082l-.006.082v2.518a.448.448 0 01-.888.08l-.007-.08v-2.518c0-.803.651-1.454 1.455-1.454z"
+          />
+          <path
+            fill="currentColor"
+            d="M12.653 13.612l.756-1.131a1.388 1.388 0 011.78-.543l.16.089.019.013c.546.364.758 1.055.51 1.681l-.055.124-.908 1.51a.448.448 0 01-.802-.388l.035-.072.89-1.48a.492.492 0 00-.113-.586l-.073-.057a.493.493 0 00-.632.11l-.055.078-.767 1.149c-.247.37-.393.797-.426 1.24l-.007.19v2.013a.447.447 0 01-.888.08l-.007-.08V15.54c0-.61.16-1.208.463-1.733l.12-.194z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CustomerCareIcon.displayName = "CustomerCareIcon";
+export { CustomerCareIcon };
diff --git a/packages/paste-icons/src/PaymentIcon.tsx b/packages/paste-icons/src/PaymentIcon.tsx
@@ -0,0 +1,61 @@
+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 PaymentIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const PaymentIcon = React.forwardRef<HTMLElement, PaymentIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `PaymentIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[PaymentIcon]: 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}
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.939 2.609a8 8 0 116.122 14.782A8 8 0 016.94 2.61zM10 3.166a6.835 6.835 0 100 13.669 6.835 6.835 0 000-13.67z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.345 7.684A.9.9 0 1010 9.417a2.066 2.066 0 11-2.066 2.066.583.583 0 011.165 0 .9.9 0 10.901-.9 2.066 2.066 0 112.066-2.066.583.583 0 11-1.165 0 .9.9 0 00-.556-.833z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 5.461c.322 0 .583.261.583.583v.99a.583.583 0 01-1.166 0v-.99c0-.322.261-.583.583-.583zM10 12.384c.322 0 .583.261.583.583v.989a.583.583 0 01-1.166 0v-.99c0-.321.261-.582.583-.582z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+PaymentIcon.displayName = "PaymentIcon";
+export { PaymentIcon };
diff --git a/packages/paste-icons/src/ProductAccountDashboardIcon.tsx b/packages/paste-icons/src/ProductAccountDashboardIcon.tsx
@@ -0,0 +1,61 @@
+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 ProductAccountDashboardIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ProductAccountDashboardIcon = React.forwardRef<HTMLElement, ProductAccountDashboardIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `ProductAccountDashboardIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[ProductAccountDashboardIcon]: 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}
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.867 3.51c-.776 0-1.357.58-1.357 1.357v10.266c0 .776.58 1.357 1.357 1.357h10.266c.788 0 1.357-.592 1.357-1.294V4.865c0-.775-.58-1.356-1.357-1.356H4.867zM2.49 4.867A2.343 2.343 0 014.867 2.49h10.266a2.343 2.343 0 012.377 2.377v10.329c0 1.288-1.049 2.314-2.377 2.314H4.867a2.343 2.343 0 01-2.377-2.377V4.867z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.49 5.738a.51.51 0 01.51-.51h14a.51.51 0 110 1.02H3a.51.51 0 01-.51-.51zM14.54 8.451a.51.51 0 01-.035.72l-4.056 3.688a.51.51 0 01-.69-.005l-1.883-1.756-2.456 2.069a.51.51 0 01-.657-.78l2.802-2.36a.51.51 0 01.677.017l1.869 1.744 3.708-3.37a.51.51 0 01.72.033z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.218 8.794a.51.51 0 01.51-.51h2.434a.51.51 0 01.51.51v2.36a.51.51 0 11-1.02 0v-1.85h-1.924a.51.51 0 01-.51-.51z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+ProductAccountDashboardIcon.displayName = "ProductAccountDashboardIcon";
+export { ProductAccountDashboardIcon };
diff --git a/packages/paste-icons/src/ProductAdminAccountsIcon.tsx b/packages/paste-icons/src/ProductAdminAccountsIcon.tsx
@@ -25,17 +25,31 @@ const ProductAdminAccountsIcon = React.forwardRef<HTMLElement, ProductAdminAccou
         <svg
           role="img"
           aria-hidden={decorative}
-          xmlns="http://www.w3.org/2000/svg"
           width="100%"
           height="100%"
           viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           aria-labelledby={titleId}
         >
           {title ? <title id={titleId}>{title}</title> : null}
           <path
             fill="currentColor"
             fillRule="evenodd"
-            d="M8.356 10.548c.605 0 1.096.49 1.096 1.096v5.26c0 .605-.49 1.096-1.096 1.096h-5.26C2.49 18 2 17.51 2 16.904v-5.26c0-.605.49-1.096 1.096-1.096zm8.548 0c.605 0 1.096.49 1.096 1.096v5.26C18 17.51 17.51 18 16.904 18h-5.26c-.605 0-1.096-.49-1.096-1.096v-5.26c0-.605.49-1.096 1.096-1.096zm-8.548.876h-5.26a.22.22 0 00-.22.22v5.26c0 .122.098.22.22.22h5.26a.22.22 0 00.22-.22v-5.26a.22.22 0 00-.22-.22zm8.548 0h-5.26a.22.22 0 00-.22.22v5.26c0 .122.099.22.22.22h5.26a.22.22 0 00.22-.22v-5.26a.22.22 0 00-.22-.22zM8.356 2c.605 0 1.096.49 1.096 1.096v5.26c0 .605-.49 1.096-1.096 1.096h-5.26C2.49 9.452 2 8.962 2 8.356v-5.26C2 2.49 2.49 2 3.096 2zm8.548 0C17.51 2 18 2.49 18 3.096v5.26c0 .605-.49 1.096-1.096 1.096h-5.26c-.605 0-1.096-.49-1.096-1.096v-5.26c0-.605.49-1.096 1.096-1.096zm-8.548.876h-5.26a.22.22 0 00-.22.22v5.26c0 .121.098.22.22.22h5.26a.22.22 0 00.22-.22v-5.26a.22.22 0 00-.22-.22zm8.548 0h-5.26a.22.22 0 00-.22.22v5.26c0 .121.099.22.22.22h5.26a.22.22 0 00.22-.22v-5.26a.22.22 0 00-.22-.22z"
+            clipRule="evenodd"
+            d="M3.81 2.941a.872.872 0 00-.869.868v5.02c0 .476.392.868.868.868h.335a.47.47 0 110 .94h-.335C2.813 10.638 2 9.826 2 8.83v-5.02C2 2.813 2.813 2 3.81 2h5.019c.996 0 1.809.813 1.809 1.81v.334a.47.47 0 01-.941 0v-.335a.872.872 0 00-.868-.868h-5.02z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.49 6.622a.872.872 0 00-.868.868v5.02c0 .476.392.868.868.868h.335a.47.47 0 010 .941H7.49c-.996 0-1.809-.813-1.809-1.81V7.49c0-.996.813-1.809 1.81-1.809h5.019c.996 0 1.809.813 1.809 1.81v.334a.47.47 0 01-.941 0V7.49a.872.872 0 00-.868-.868H7.49z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.171 10.303a.872.872 0 00-.868.868v5.02c0 .476.392.868.868.868h5.02a.872.872 0 00.868-.868v-5.02a.872.872 0 00-.868-.868h-5.02zm-1.809.868c0-.996.813-1.809 1.81-1.809h5.019c.996 0 1.809.813 1.809 1.81v5.019c0 .996-.813 1.809-1.81 1.809h-5.019c-.996 0-1.809-.813-1.809-1.81v-5.019z"
           />
         </svg>
       </IconWrapper>