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

.changeset/two-jeans-flash.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/icons": minor
+"@twilio-paste/core": minor
+---
+
+[Icons] Add 6 new icons: ProductConversationalInsightsIcon, DataArrayIcon, DataBooleanIcon, DataNumberIcon, DataObectIcon, and DataStringIcon.

packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap

@@ -65,9 +65,14 @@ Array [
   "CreditCardIcon",
   "CustomIcon",
   "DarkModeIcon",
+  "DataArrayIcon",
   "DataBarChartIcon",
+  "DataBooleanIcon",
   "DataLineChartIcon",
+  "DataNumberIcon",
+  "DataObjectIcon",
   "DataPieChartIcon",
+  "DataStringIcon",
   "DataTableIcon",
   "DatabaseIcon",
   "DeleteIcon",
@@ -171,6 +176,7 @@ Array [
   "ProductContactCenterQueuesIcon",
   "ProductContactCenterTasksIcon",
   "ProductContactCenterTeamsIcon",
+  "ProductConversationalInsightsIcon",
   "ProductConversationsIcon",
   "ProductDebuggerIcon",
   "ProductDestinationsIcon",

packages/paste-icons/src/DataArrayIcon.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 DataArrayIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const DataArrayIcon = React.forwardRef<HTMLElement, DataArrayIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `DataArrayIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[DataArrayIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.233 5A.233.233 0 005 5.233v9.534a.233.233 0 00.233.233h1.833a.5.5 0 010 1H5.233A1.233 1.233 0 014 14.767V5.233A1.233 1.233 0 015.233 4h1.833a.5.5 0 010 1H5.233zm7.2-.5a.5.5 0 01.5-.5h1.833A1.233 1.233 0 0116 5.233v9.534A1.233 1.233 0 0114.766 16h-1.833a.5.5 0 010-1h1.833a.234.234 0 00.233-.233V5.233A.234.234 0 0014.766 5h-1.833a.5.5 0 01-.5-.5z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+DataArrayIcon.displayName = "DataArrayIcon";
+export { DataArrayIcon };

packages/paste-icons/src/DataBooleanIcon.tsx

@@ -0,0 +1,55 @@
+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 DataBooleanIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const DataBooleanIcon = React.forwardRef<HTMLElement, DataBooleanIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `DataBooleanIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[DataBooleanIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.023 7h5.956c.8.003 1.567.32 2.133.882A3 3 0 0116 9.998v.004a3 3 0 01-.888 2.116 3.045 3.045 0 01-2.133.882H7.021a3.045 3.045 0 01-2.133-.882A3 3 0 014 10.002v-.004a3 3 0 01.888-2.116A3.045 3.045 0 017.021 7h.002zm0 .956a2.078 2.078 0 00-1.454.602A2.047 2.047 0 004.963 10c.003.541.22 1.06.606 1.442.386.383.909.6 1.455.602h5.952a2.079 2.079 0 001.455-.602c.385-.382.603-.9.606-1.442a2.047 2.047 0 00-.606-1.442 2.078 2.078 0 00-1.455-.602H7.024z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.747 8.911a1.557 1.557 0 012.194 0 1.534 1.534 0 010 2.178 1.557 1.557 0 01-2.194 0 1.534 1.534 0 010-2.178zm1.097.505a.59.59 0 00-.416.171.582.582 0 00.416.997.59.59 0 00.416-.171.582.582 0 00-.416-.997z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+DataBooleanIcon.displayName = "DataBooleanIcon";
+export { DataBooleanIcon };

packages/paste-icons/src/DataNumberIcon.tsx

@@ -0,0 +1,55 @@
+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 DataNumberIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const DataNumberIcon = React.forwardRef<HTMLElement, DataNumberIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `DataNumberIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[DataNumberIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.877 7a.46.46 0 01.461.461v5.748a.461.461 0 01-.922 0V7.46a.46.46 0 01.461-.461z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.877 7a.46.46 0 01.461.461c0 1.049-.85 1.898-1.898 1.898h-.479a.461.461 0 110-.922h.48a.976.976 0 00.975-.976A.46.46 0 013.877 7zM1.5 13.209a.46.46 0 01.461-.461h3.832a.461.461 0 110 .922H1.96a.461.461 0 01-.461-.461zM15.552 7h.718a1.778 1.778 0 011.27 3.023c.455.347.748.894.748 1.51v.239c0 1.048-.85 1.898-1.898 1.898h-.958c-.827 0-1.53-.529-1.79-1.265a.461.461 0 01.87-.308c.134.38.496.65.92.65h.958a.976.976 0 00.976-.975v-.24a.976.976 0 00-.976-.975h-.479a.461.461 0 010-.923h.36a.856.856 0 000-1.712h-.72a.856.856 0 00-.823.623.461.461 0 01-.887-.251A1.779 1.779 0 0115.55 7zM7.666 8.265A1.899 1.899 0 019.456 7h.995a1.86 1.86 0 01.746 3.566l-2.132.932a.976.976 0 00-.585.894v.356h3.37a.461.461 0 010 .922H8.02a.461.461 0 01-.461-.461v-.817c0-.754.446-1.436 1.137-1.739l2.132-.932a.938.938 0 00-.376-1.799h-.995a.976.976 0 00-.92.65.461.461 0 01-.87-.307z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+DataNumberIcon.displayName = "DataNumberIcon";
+export { DataNumberIcon };

packages/paste-icons/src/DataObjectIcon.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 DataObjectIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const DataObjectIcon = React.forwardRef<HTMLElement, DataObjectIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `DataObjectIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[DataObjectIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.674 5.294a1.21 1.21 0 00-.907-.29h-.91a.5.5 0 010-1h.894a2.21 2.21 0 012.337 2.071v1.507a1.024 1.024 0 00.56.88l1.922 1.105a.5.5 0 010 .867l-1.922 1.104-.014.008a1.027 1.027 0 00-.546.873v1.507l-.001.04a2.21 2.21 0 01-2.336 2.03h-.895a.5.5 0 010-1h.911l.034.001a1.21 1.21 0 001.287-1.092v-1.508a2.027 2.027 0 011.069-1.73l1.16-.667-1.16-.667a2.025 2.025 0 01-1.069-1.73V6.097a1.21 1.21 0 00-.414-.803zM7.32 4.004h.895a.5.5 0 010 1h-.91l-.035-.001a1.21 1.21 0 00-1.287 1.094v1.506a2.025 2.025 0 01-1.069 1.73L3.753 10l1.16.667a2.028 2.028 0 011.069 1.73v1.508a1.21 1.21 0 001.321 1.091h.91a.5.5 0 010 1H7.32a2.21 2.21 0 01-2.337-2.07v-1.508a1.027 1.027 0 00-.545-.872l-.015-.008L2.5 10.434a.5.5 0 010-.867l1.92-1.105a1.025 1.025 0 00.56-.88V6.075a2.21 2.21 0 012.337-2.071z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+DataObjectIcon.displayName = "DataObjectIcon";
+export { DataObjectIcon };

packages/paste-icons/src/DataStringIcon.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 DataStringIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const DataStringIcon = React.forwardRef<HTMLElement, DataStringIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `DataStringIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[DataStringIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.715 8.106a.155.155 0 01.295 0l.89 2.673H2.825l.89-2.673zM2.49 11.78h2.744l.516 1.548a.5.5 0 10.949-.316l-1.74-5.22a1.155 1.155 0 00-2.193 0l-1.74 5.22a.5.5 0 00.948.316l.516-1.548zM8.623 7a.5.5 0 00-.5.5v5.67a.5.5 0 00.5.5h2.244a2.035 2.035 0 001.146-3.719A1.8 1.8 0 0010.631 7H8.623zm.5 3.598h1.744a1.035 1.035 0 110 2.071H9.123V10.6zm1.516-1A.8.8 0 0010.631 8H9.123v1.598h1.516zm3.662-.68c0-1.06.859-1.918 1.918-1.918h.944c.836 0 1.546.534 1.809 1.278a.5.5 0 01-.943.333.918.918 0 00-.866-.611h-.944a.917.917 0 00-.918.917v2.835c0 .506.411.917.918.917h.944c.4 0 .74-.254.866-.611a.5.5 0 01.943.333 1.918 1.918 0 01-1.809 1.278h-.944a1.917 1.917 0 01-1.918-1.917V8.917z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+DataStringIcon.displayName = "DataStringIcon";
+export { DataStringIcon };

packages/paste-icons/src/ProductConversationalInsightsIcon.tsx

@@ -0,0 +1,55 @@
+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 ProductConversationalInsightsIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ProductConversationalInsightsIcon = React.forwardRef<HTMLElement, ProductConversationalInsightsIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `ProductConversationalInsightsIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[ProductConversationalInsightsIcon]: 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}
+          height="100%"
+          width="100%"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5 5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h10a.5.5 0 00.5-.5v-5a.5.5 0 011 0v5A1.5 1.5 0 0115 17H5a1.5 1.5 0 01-1.5-1.5v-10A1.5 1.5 0 015 4h5a.5.5 0 010 1H5z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.7 6.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm0 2.25a.5.5 0 01.5-.5h3.5a.5.5 0 010 1H6.2a.5.5 0 01-.5-.5zm2.146 2.896a.5.5 0 01.666-.036l2.15 1.72 1.184-1.184a.5.5 0 01.708.708l-1.5 1.5a.5.5 0 01-.666.036l-2.15-1.72-1.684 1.684a.5.5 0 01-.708-.707l2-2zm1.61-5.608c2.745-.04 4.072-1.32 4.082-4.077.002-.617.927-.614.925.004-.01 2.687 1.263 4.01 4.085 4.073.61.014.599.928-.013.925-2.634-.01-3.933 1.315-4.072 4.097-.03.598-.92.58-.925-.018C13.51 8.29 12.28 6.96 9.463 6.963c-.613.001-.62-.917-.007-.925zm4.603-1.435l-.063-.135-.104.219c-.417.818-1.06 1.417-1.923 1.796l.16.073c.884.423 1.513 1.102 1.893 2.018l.019.047.08-.176c.422-.884 1.067-1.531 1.93-1.93l.035-.017-.107-.046c-.875-.395-1.516-1.015-1.92-1.849z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+ProductConversationalInsightsIcon.displayName = "ProductConversationalInsightsIcon";
+export { ProductConversationalInsightsIcon };