refactor: LEAP-1907: Migrate EnterpriseBadge to UI library

web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx

@@ -1,3 +1,4 @@
+import { EnterpriseBadge } from "@humansignal/ui";
 import React from "react";
 import { useHistory } from "react-router";
 import { Button, ToggleItems } from "../../components";
@@ -12,7 +13,6 @@ import { ImportPage } from "./Import/Import";
 import { useImportPage } from "./Import/useImportPage";
 import { useDraftProject } from "./utils/useDraftProject";
 import { Input, Select, TextArea } from "../../components/Form";
-import { EnterpriseBadge } from "../../components/Badges/Enterprise";
 import { Caption } from "../../components/Caption/Caption";
 import { FF_LSDV_E_297, isFF } from "../../utils/feature-flags";
 import { createURL } from "../../components/HeidiTips/utils";
@@ -53,7 +53,7 @@ const ProjectName = ({ name, setName, onSaveName, onSubmit, error, description,
         <div className="field field--wide">
           <label>
             Workspace
-            <EnterpriseBadge />
+            <EnterpriseBadge className="ml-2" />
           </label>
           <Select placeholder="Select an option" disabled options={[]} />
           <Caption>

web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx

@@ -1,10 +1,10 @@
+import { EnterpriseBadge } from "@humansignal/ui";
 import { useCallback, useContext } from "react";
 import { Button } from "../../components";
 import { Form, Input, Select, TextArea } from "../../components/Form";
 import { RadioGroup } from "../../components/Form/Elements/RadioGroup/RadioGroup";
 import { ProjectContext } from "../../providers/ProjectProvider";
 import { Block, Elem } from "../../utils/bem";
-import { EnterpriseBadge } from "../../components/Badges/Enterprise";
 import "./settings.scss";
 import { HeidiTips } from "../../components/HeidiTips/HeidiTips";
 import { FF_LSDV_E_297, isFF } from "../../utils/feature-flags";
@@ -39,7 +39,7 @@ export const GeneralSettings = () => {
                 <Block name="workspace-placeholder">
                   <Elem name="badge-wrapper">
                     <Elem name="title">Workspace</Elem>
-                    <EnterpriseBadge />
+                    <EnterpriseBadge className="ml-2" />
                   </Elem>
                   <Select placeholder="Select an option" disabled options={[]} />
                   <Caption>
@@ -83,7 +83,7 @@ export const GeneralSettings = () => {
                     value=""
                     label={
                       <>
-                        Uncertainty sampling <EnterpriseBadge />
+                        Uncertainty sampling <EnterpriseBadge className="ml-2" />
                       </>
                     }
                     disabled

web/libs/ui/src/assets/icons/index.ts

@@ -11,3 +11,4 @@ export { ReactComponent as IconUpload } from "./upload.svg";
 export { ReactComponent as IconLaunch } from "./launch.svg";
 export { ReactComponent as IconFileCopy } from "./file-copy.svg";
 export { ReactComponent as IconWarning } from "./warning.svg";
+export { ReactComponent as IconSpark } from "./spark.svg";

web/libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./lib/enterprise-badge/enterprise-badge";
 export * from "./lib/checkbox/checkbox";
 export * from "./lib/toast/toast";
 export * from "./lib/InputFile/InputFile";

web/libs/ui/src/lib/enterprise-badge/enterprise-badge.module.scss

@@ -0,0 +1,34 @@
+.badge {
+  display: inline-block;
+  border-radius: 4px;
+  background: linear-gradient(135deg, #FFA663 0%, #FF7557 51.56%, #E37BD3 100%);
+  vertical-align: middle;
+  height: 20px;
+}
+
+.filled {
+  .label {
+    background: none;
+    color: var(--persimmon_0);
+  }
+
+  .icon {
+    path {
+      fill: var(--persimmon_0);
+    }
+  }
+}
+
+.label {
+  margin: 1px;
+  background: var(--persimmon_0);
+  color: var(--persimmon_400);
+  border-radius: 3px;
+  font-size: 11px;
+  padding: 2px 5px 2px 3px;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  line-height: 100%;
+  font-weight: 500;
+}

web/libs/ui/src/lib/enterprise-badge/enterprise-badge.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EnterpriseBadge } from "./enterprise-badge";
+
+const meta: Meta<typeof EnterpriseBadge> = {
+  component: EnterpriseBadge,
+  title: "EnterpriseBadge",
+  tags: ["autodocs"],
+  argTypes: {
+    filled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EnterpriseBadge>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Filled: Story = {
+  args: {
+    filled: true,
+  },
+};

web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import type { FC } from "react";
+import { IconSpark } from "../../assets/icons";
+import styles from "./enterprise-badge.module.scss";
+
+/* eslint-disable-next-line */
+export interface EnterpriseBadgeProps {
+  className?: string;
+  filled?: boolean;
+}
+
+export const EnterpriseBadge: FC<EnterpriseBadgeProps> = ({ className, filled }) => {
+  return (
+    <div className={clsx(styles.badge, { [styles.filled]: filled }, className)}>
+      <div className={clsx(styles.label)}>
+        <IconSpark className={clsx(styles.icon)} />
+        Enterprise
+      </div>
+    </div>
+  );
+};
+
+export default EnterpriseBadge;