feat(Pill): add icon support to Pill component and update tests

Common/Tests/UI/Components/Pill.test.tsx

@@ -2,6 +2,7 @@ import Pill, { PillSize } from "../../../UI/Components/Pill/Pill";
 import "@testing-library/jest-dom/extend-expect";
 import { render, screen } from "@testing-library/react";
 import Color from "../../../Types/Color";
+import IconProp from "../../../Types/Icon/IconProp";
 import * as React from "react";
 import { describe, expect, test } from "@jest/globals";
 
@@ -46,4 +47,11 @@ describe("<Pill />", () => {
     render(<Pill text="Love" color={color} size={PillSize.ExtraLarge} />);
     expect(screen.getByTestId("pill")).toHaveStyle("backgroundColor:  #786598");
   });
+  test("renders icon when provided", () => {
+    const color: Color = new Color("#807149");
+    const { container } = render(
+      <Pill text="Love" color={color} icon={IconProp.Label} />,
+    );
+    expect(container.querySelector('[role="icon"]')).not.toBeNull();
+  });
 });

Common/UI/Components/Label/Label.tsx

@@ -6,6 +6,7 @@ import Pill, {
 } from "../Pill/Pill";
 import { Black } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   label: LabelModel;
@@ -39,6 +40,7 @@ const LabelElement: FunctionComponent<ComponentProps> = (
     size: props.size,
     isMinimal: props.isMinimal,
     tooltip: label.description || undefined,
+    icon: IconProp.Label,
   };
 
   if (props.style) {

Common/UI/Components/Pill/Pill.tsx

@@ -1,5 +1,7 @@
 import { Black } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
+import Icon, { SizeProp } from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
 import Tooltip from "../Tooltip/Tooltip";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
@@ -18,6 +20,7 @@ export interface ComponentProps {
   style?: CSSProperties;
   isMinimal?: boolean | undefined;
   tooltip?: string | undefined;
+  icon?: IconProp | undefined;
 }
 
 const Pill: FunctionComponent<ComponentProps> = (
@@ -47,7 +50,7 @@ const Pill: FunctionComponent<ComponentProps> = (
     return (
       <span
         data-testid="pill"
-        className="rounded-full p-1 pl-3 pr-3"
+        className="inline-flex items-center rounded-full p-1 pl-3 pr-3"
         style={{
           // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
 
@@ -63,8 +66,14 @@ const Pill: FunctionComponent<ComponentProps> = (
           ...props.style,
         }}
       >
-        {" "}
-        {props.text}{" "}
+        {props.icon ? (
+          <Icon
+            icon={props.icon}
+            size={SizeProp.Small}
+            className="mr-2"
+          />
+        ) : null}
+        {props.text}
       </span>
     );
   };