feat(icons): add sentiment and folder icons (#3808)

.changeset/large-berries-crash.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/icons": minor
+"@twilio-paste/core": minor
+---
+
+[Icons] Add new icons SentimentNeutral, SentimentPositive, SentimentNegative, and Folder

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

@@ -98,6 +98,7 @@ Array [
   "FileZipIcon",
   "FilterIcon",
   "FlagIcon",
+  "FolderIcon",
   "GitIcon",
   "HeatmapIcon",
   "HideIcon",
@@ -249,6 +250,9 @@ Array [
   "SelectedIcon",
   "SendIcon",
   "SentIcon",
+  "SentimentNegativeIcon",
+  "SentimentNeutralIcon",
+  "SentimentPositiveIcon",
   "ShareIcon",
   "ShowIcon",
   "ShrinkIcon",

packages/paste-icons/src/FolderIcon.tsx

@@ -0,0 +1,49 @@
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface FolderIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const FolderIcon = React.forwardRef<HTMLElement, FolderIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `FolderIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[FolderIcon]: 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="M3.432 3.432A1.474 1.474 0 014.475 3h3.011a1.474 1.474 0 011.475 1.475v.534h6.556a1.474 1.474 0 011.475 1.475v1.538h.533a1.474 1.474 0 011.427 1.85l-1.474 6.032A1.476 1.476 0 0116.053 17H4.606a.47.47 0 01-.143-.022A1.608 1.608 0 013 15.398V4.474c0-.39.155-.766.432-1.043zm2.632 12.626h9.989a.533.533 0 00.514-.392l1.474-6.031a.534.534 0 00-.516-.67H8.242a.535.535 0 00-.51.375L6.16 15.795a1.611 1.611 0 01-.096.263zm9.987-8.036V6.484a.534.534 0 00-.534-.533H8.49a.47.47 0 01-.47-.471V4.475a.534.534 0 00-.534-.533H4.475a.533.533 0 00-.534.533v10.912a.668.668 0 001.307.176L6.82 9.106a1.475 1.475 0 011.422-1.083h7.81z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+FolderIcon.displayName = "FolderIcon";
+export { FolderIcon };

packages/paste-icons/src/SentimentNegativeIcon.tsx

@@ -0,0 +1,48 @@
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface SentimentNegativeIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const SentimentNegativeIcon = React.forwardRef<HTMLElement, SentimentNegativeIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `SentimentNegativeIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[SentimentNegativeIcon]: 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"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a7 7 0 100 14 7 7 0 000-14zM7.461 7.135a.788.788 0 100 1.577.788.788 0 000-1.577zm5.077 0a.788.788 0 100 1.577.788.788 0 000-1.577zM7 13.339a3.498 3.498 0 013-1.696c1.273 0 2.387.679 3 1.696a.5.5 0 00.857-.516A4.498 4.498 0 0010 10.643c-1.638 0-3.07.875-3.857 2.18A.5.5 0 007 13.34z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+SentimentNegativeIcon.displayName = "SentimentNegativeIcon";
+export { SentimentNegativeIcon };

packages/paste-icons/src/SentimentNeutralIcon.tsx

@@ -0,0 +1,52 @@
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface SentimentNeutralIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const SentimentNeutralIcon = React.forwardRef<HTMLElement, SentimentNeutralIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `SentimentNeutralIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[SentimentNeutralIcon]: 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"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            d="M7.461 7.135a.788.788 0 100 1.577.788.788 0 000-1.577zm5.077 0a.788.788 0 100 1.577.788.788 0 000-1.577zM7.012 11.99a.5.5 0 000 1h5.976a.5.5 0 100-1H7.012z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a7 7 0 100 14 7 7 0 000-14z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+SentimentNeutralIcon.displayName = "SentimentNeutralIcon";
+export { SentimentNeutralIcon };

packages/paste-icons/src/SentimentPositiveIcon.tsx

@@ -0,0 +1,52 @@
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface SentimentPositiveIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const SentimentPositiveIcon = React.forwardRef<HTMLElement, SentimentPositiveIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `SentimentPositiveIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[SentimentPositiveIcon]: 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"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            d="M6.674 11.02a.5.5 0 00-.964.268c.653 2.35 3.241 3.766 5.577 3.117a.531.531 0 00.037-.012c1.403-.51 2.572-1.663 2.966-3.108a.5.5 0 00-.965-.263c-.297 1.089-1.197 2.008-2.324 2.425-1.813.492-3.828-.629-4.327-2.427zm.787-3.885a.788.788 0 100 1.577.788.788 0 000-1.577zm5.077 0a.788.788 0 000 1.577.789.789 0 100-1.577z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 2a8 8 0 100 16 8 8 0 000-16zm-7 8a7 7 0 1114 0 7 7 0 01-14 0z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+SentimentPositiveIcon.displayName = "SentimentPositiveIcon";
+export { SentimentPositiveIcon };

packages/paste-website/public/images/card/Marketing3.tsx

@@ -129,15 +129,7 @@ export const Marketing3 = (): JSX.Element => {
         fill="#fff"
       />
       <defs>
-        <filter
-          id="Group 19448__a"
-          x="0"
-          y="127.5"
-          width="265"
-          height="192"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
+        <filter x="0" y="127.5" width="265" height="192" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
           <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
           <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
@@ -147,7 +139,6 @@ export const Marketing3 = (): JSX.Element => {
           <feBlend in2="shape" result="effect1_innerShadow_915_16082" />
         </filter>
         <filter
-          id="Group 19448__b"
           x="167"
           y="173.5"
           width="211"

packages/paste-website/public/images/card/Marketing4.tsx

@@ -32,7 +32,6 @@ export const Marketing4 = (): JSX.Element => {
             fill="#51A9E3"
           />
           <mask
-            id="text-marketing_roi__c"
             // style="mask-type:luminance"
             maskUnits="userSpaceOnUse"
             x="175"
@@ -63,7 +62,6 @@ export const Marketing4 = (): JSX.Element => {
             strokeWidth="1.5"
           />
           <mask
-            id="text-marketing_roi__e"
             // style="mask-type:luminance"
             maskUnits="userSpaceOnUse"
             x="175"
@@ -168,7 +166,6 @@ export const Marketing4 = (): JSX.Element => {
       <ellipse cx="3.005" cy="3.045" rx="3.005" ry="3.045" transform="matrix(-1 0 0 1 138.245 187.5)" fill="#fff" />
       <defs>
         <filter
-          id="text-marketing_roi__a"
           x="67"
           y="24.5"
           width="345.607"
@@ -185,7 +182,6 @@ export const Marketing4 = (): JSX.Element => {
           <feBlend in="SourceGraphic" in2="effect1_dropShadow_913_99738" result="shape" />
         </filter>
         <filter
-          id="text-marketing_roi__g"
           x="23"
           y="170.5"
           width="135.816"
@@ -202,7 +198,6 @@ export const Marketing4 = (): JSX.Element => {
           <feBlend in="SourceGraphic" in2="effect1_dropShadow_913_99738" result="shape" />
         </filter>
         <filter
-          id="text-marketing_roi__h"
           x="88"
           y="152.5"
           width="118.938"
@@ -218,29 +213,15 @@ export const Marketing4 = (): JSX.Element => {
           <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_913_99738" />
           <feBlend in="SourceGraphic" in2="effect1_dropShadow_913_99738" result="shape" />
         </filter>
-        <linearGradient
-          id="text-marketing_roi__d"
-          x1="-235.982"
-          y1="-46.638"
-          x2="-235.982"
-          y2="103.748"
-          gradientUnits="userSpaceOnUse"
-        >
+        <linearGradient x1="-235.982" y1="-46.638" x2="-235.982" y2="103.748" gradientUnits="userSpaceOnUse">
           <stop stopColor="#008CFF" />
           <stop offset="1" stopColor="#008CFF" stopOpacity=".01" />
         </linearGradient>
-        <linearGradient
-          id="text-marketing_roi__f"
-          x1="-221.89"
-          y1="5.591"
-          x2="-221.89"
-          y2="155.977"
-          gradientUnits="userSpaceOnUse"
-        >
+        <linearGradient x1="-221.89" y1="5.591" x2="-221.89" y2="155.977" gradientUnits="userSpaceOnUse">
           <stop stopColor="#F22F45" />
           <stop offset="1" stopColor="#F22F46" stopOpacity=".01" />
         </linearGradient>
-        <clipPath id="text-marketing_roi__b">
+        <clipPath>
           <rect x="83" y="40.5" width="305.607" height="216" rx="4.889" fill="#fff" />
         </clipPath>
       </defs>

packages/paste-website/stories/Card.stories.tsx

@@ -139,7 +139,7 @@ export const MarketingOneExample = (): JSX.Element => {
     <Card>
       <MediaObject verticalAlign="top">
         <MediaFigure spacing="space90">
-          <Box as="img" src="./card/marketing1.png" maxHeight="150px" />
+          <Box as="img" src="./card/marketing1.png" maxHeight="150px" alt="" />
         </MediaFigure>
         <MediaBody>
           <Heading as="h6" variant="heading30">