feat(icons): add icons for upcoming release

.changeset/nervous-lies-drive.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": minor
+"@twilio-paste/icons": minor
+---
+
+[Icons] added 4 new icons FeedbackIcon, TextIcon, CarouselIcon and CardIcon

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

@@ -35,6 +35,8 @@ Array [
   "CallIncomingIcon",
   "CallOutgoingIcon",
   "CallTransferIcon",
+  "CardIcon",
+  "CarouselIcon",
   "CartIcon",
   "ChatIcon",
   "CheckboxCheckIcon",
@@ -100,6 +102,7 @@ Array [
   "ExportIcon",
   "FaxCapableIcon",
   "FeedIcon",
+  "FeedbackIcon",
   "FileAudioIcon",
   "FileIcon",
   "FileImageIcon",
@@ -298,6 +301,7 @@ Array [
   "TextFormatClearIcon",
   "TextFormatIcon",
   "TextHighlightIcon",
+  "TextIcon",
   "ThemeIcon",
   "ThumbsDownIcon",
   "ThumbsUpIcon",

packages/paste-icons/src/CardIcon.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 CardIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CardIcon = React.forwardRef<HTMLElement, CardIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CardIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CardIcon]: 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}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 3.505V16.5c0 .163.04.251.072.3a.38.38 0 00.152.128.732.732 0 00.28.072H16.5c.163 0 .251-.04.3-.072a.38.38 0 00.128-.152.731.731 0 00.071-.269l.001-.012V3.5a.524.524 0 00-.072-.3.378.378 0 00-.152-.128.73.73 0 00-.269-.071L16.495 3H3.5a.524.524 0 00-.3.072.38.38 0 00-.128.152.73.73 0 00-.071.269L3 3.505zM16.5 2.5V2h-13c-.337 0-.624.086-.855.24a1.377 1.377 0 00-.467.536A1.728 1.728 0 002 3.472V3.5l.5.001H2v13c0 .337.086.624.24.855.153.229.352.375.536.467a1.729 1.729 0 00.696.178H3.5l.001-.5v.5h13c.337 0 .624-.086.855-.24.229-.153.375-.352.467-.536a1.73 1.73 0 00.178-.696V16.5l-.5-.001h.5v-13c0-.337-.086-.624-.24-.855a1.378 1.378 0 00-.536-.467A1.73 1.73 0 0016.528 2H16.5l-.001.5z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 6.528v2.944a.255.255 0 00.122.028h5.82a.255.255 0 00.121-.028V6.528a.255.255 0 00-.122-.028H7.122A.255.255 0 007 6.528zm-.622-.786c.208-.158.472-.242.744-.242h5.82c.271 0 .536.084.743.242a.926.926 0 01.378.734v3.048c0 .32-.17.575-.378.734a1.226 1.226 0 01-.744.242H7.122c-.272 0-.536-.084-.744-.242A.926.926 0 016 9.524V6.476c0-.32.17-.575.378-.734zM5 12.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CardIcon.displayName = "CardIcon";
+export { CardIcon };

packages/paste-icons/src/CarouselIcon.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 CarouselIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CarouselIcon = React.forwardRef<HTMLElement, CarouselIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CarouselIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CarouselIcon]: 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}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            d="M7 17a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm2-12.5a.5.5 0 011 0v7a.5.5 0 01-1 0v-7zm-15 0a.5.5 0 011 0v7a.5.5 0 01-1 0v-7z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13 4H7a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1V5a1 1 0 00-1-1zM7 3a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H7z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CarouselIcon.displayName = "CarouselIcon";
+export { CarouselIcon };

packages/paste-icons/src/FeedbackIcon.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 FeedbackIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const FeedbackIcon = React.forwardRef<HTMLElement, FeedbackIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `FeedbackIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[FeedbackIcon]: 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}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.433 4A.433.433 0 005 4.433v12.13a.433.433 0 00.433.433h3.732a.5.5 0 010 1H5.433A1.433 1.433 0 014 16.563V4.433A1.433 1.433 0 015.433 3h6.613c.38 0 .744.152 1.013.42l3.653 3.654a1.459 1.459 0 01.417 1.127.5.5 0 11-.998-.07.457.457 0 00-.13-.354l-3.65-3.65A.434.434 0 0012.045 4H5.433z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.965 3a.5.5 0 01.5.5v3.732a.433.433 0 00.433.433h3.732a.5.5 0 010 1h-3.732a1.433 1.433 0 01-1.433-1.433V3.5a.5.5 0 01.5-.5zM9.42 8.614a.5.5 0 01.093.701L8.16 11.084a.987.987 0 01-.694.379l-.017.001a.98.98 0 01-.738-.28l-.009-.009-.697-.722a.5.5 0 11.72-.694l.664.688 1.328-1.74a.5.5 0 01.701-.093zm0 4.199a.5.5 0 01.093.7l-1.352 1.77a.985.985 0 01-.694.379H7.45a.978.978 0 01-.738-.279l-.009-.009-.697-.722a.5.5 0 01.72-.694l.664.687 1.328-1.738a.5.5 0 01.701-.094zm1.112-1.848a.5.5 0 01.5-.5h2.332a.5.5 0 110 1h-2.332a.5.5 0 01-.5-.5zm6.645-.437a.812.812 0 00-.577.24l-.002.003-4.64 4.64-.289 1.448 1.449-.29 4.64-4.641a.813.813 0 000-1.155l-.003-.004a.814.814 0 00-.578-.241zm-.698-.86a1.812 1.812 0 011.985.396 1.814 1.814 0 010 2.574h-.002l-4.744 4.745a.5.5 0 01-.256.137l-2.332.467a.5.5 0 01-.589-.589l.467-2.332a.5.5 0 01.137-.256l4.744-4.744.001-.001c.168-.17.369-.305.59-.397z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+FeedbackIcon.displayName = "FeedbackIcon";
+export { FeedbackIcon };

packages/paste-icons/src/TextIcon.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 TextIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const TextIcon = React.forwardRef<HTMLElement, TextIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `TextIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[TextIcon]: 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}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.84 3h6.325c.648 0 1.183 0 1.607.057.447.06.843.192 1.162.51.319.32.45.718.51 1.164.056.423.056.957.056 1.6v.727a.5.5 0 01-1 0v-.683c0-.692 0-1.16-.048-1.511-.045-.336-.124-.487-.226-.59-.102-.102-.253-.18-.588-.226C14.29 4.001 13.822 4 13.13 4H10.5v12.438a.5.5 0 01-1 0V4H6.875c-.692 0-1.16.001-1.51.048-.337.045-.488.124-.59.227-.103.102-.182.253-.227.59-.047.35-.048.818-.048 1.51v.683a.5.5 0 11-1 0V6.34c0-.648 0-1.184.057-1.609.06-.447.192-.845.51-1.164m0 0c.32-.318.717-.45 1.164-.51C5.656 3 6.192 3 6.84 3"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.5 16.5A.5.5 0 016 16h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+TextIcon.displayName = "TextIcon";
+export { TextIcon };