diff --git a/web/apps/labelstudio/src/components/Badges/Enterprise.scss b/web/apps/labelstudio/src/components/Badges/Enterprise.scss deleted file mode 100644 index c13e02729f95..000000000000 --- a/web/apps/labelstudio/src/components/Badges/Enterprise.scss +++ /dev/null @@ -1,31 +0,0 @@ -.enterprise-badge { - display: inline-block; - border-radius: 4px; - background: linear-gradient(135deg, #FFA663 0%, #FF7557 51.56%, #E37BD3 100%); - vertical-align: middle; - margin: 0 8px; - height: 20px; - - &__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; - } - - &_filled &__label { - background: none; - color: var(--persimmon_0); - } - - &_filled &__icon path { - fill: var(--persimmon_0); - } -} \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Badges/Enterprise.tsx b/web/apps/labelstudio/src/components/Badges/Enterprise.tsx deleted file mode 100644 index 06a169ab1388..000000000000 --- a/web/apps/labelstudio/src/components/Badges/Enterprise.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { FC } from "react"; -import { IconSpark } from "../../assets/icons"; -import { Block, Elem } from "../../utils/bem"; -import "./Enterprise.scss"; - -export const EnterpriseBadge: FC<{ - filled?: boolean; -}> = ({ filled }) => { - return ( - - - - Enterprise - - - ); -}; diff --git a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx index b5bf6f075073..fa493a7816e8 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx +++ b/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,
@@ -83,7 +83,7 @@ export const GeneralSettings = () => { value="" label={ <> - Uncertainty sampling + Uncertainty sampling } disabled diff --git a/web/libs/ui/src/assets/icons/index.ts b/web/libs/ui/src/assets/icons/index.ts index a5cd0fbf33ff..acf7a9fddafb 100644 --- a/web/libs/ui/src/assets/icons/index.ts +++ b/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"; diff --git a/web/libs/ui/src/assets/icons/spark.svg b/web/libs/ui/src/assets/icons/spark.svg new file mode 100644 index 000000000000..d59dbe6c07ac --- /dev/null +++ b/web/libs/ui/src/assets/icons/spark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/libs/ui/src/index.ts b/web/libs/ui/src/index.ts index 348a573d6d79..6f055d24e51a 100644 --- a/web/libs/ui/src/index.ts +++ b/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"; diff --git a/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.module.scss b/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.module.scss new file mode 100644 index 000000000000..091d42a51c7b --- /dev/null +++ b/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; +} diff --git a/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.stories.tsx b/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.stories.tsx new file mode 100644 index 000000000000..a3579eaeccb6 --- /dev/null +++ b/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 = { + component: EnterpriseBadge, + title: "EnterpriseBadge", + tags: ["autodocs"], + argTypes: { + filled: { control: "boolean" }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; + +export const Filled: Story = { + args: { + filled: true, + }, +}; diff --git a/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx b/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx new file mode 100644 index 000000000000..c78cc72145ec --- /dev/null +++ b/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 = ({ className, filled }) => { + return ( +
+
+ + Enterprise +
+
+ ); +}; + +export default EnterpriseBadge;