Skip to content

Commit d2039fc

Browse files
ricardoantoniocmricardoantoniocm
authored
feat: FIT-896: SC: Surface mocked up project dashboard with Enterprise banner (#8756)
Co-authored-by: ricardoantoniocm <[email protected]>
1 parent c0ef641 commit d2039fc

File tree

6 files changed

+393
-2
lines changed

6 files changed

+393
-2
lines changed

‎web/libs/ui/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export * from "./lib/code-block/code-block";
1212
export * from "./lib/code-editor/code-editor";
1313
export * from "./lib/empty-state/empty-state";
1414
export * from "./lib/enterprise-badge/enterprise-badge";
15+
export * from "./lib/enterprise-upgrade-overlay/enterprise-upgrade-overlay";
1516
export * from "./lib/label/label";
1617
export * from "./lib/select/select";
1718
export * from "./lib/skeleton/skeleton";

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
.filled {
1010
.label {
1111
background: none;
12-
color: var(--color-accent-persimmon-base);
12+
color: var(--color-neutral-on-dark-content);
1313
}
1414

1515
.icon {
1616
path {
17-
fill: var(--color-accent-persimmon-base);
17+
fill: var(--color-neutral-on-dark-content);
1818
}
1919
}
2020
}
@@ -31,4 +31,5 @@
3131
align-items: center;
3232
line-height: 100%;
3333
font-weight: 500;
34+
cursor: default;
3435
}

‎web/libs/ui/src/lib/enterprise-upgrade-overlay/enterprise-upgrade-overlay.module.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.overlay {
2+
position: absolute;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
z-index: 3000;
7+
backdrop-filter: blur(2px) grayscale(80%);
8+
background: rgb(var(--color-neutral-background-raw) / 70%);
9+
inset: -16px -24px;
10+
}
11+
12+
.container {
13+
// Gradient border effect using padding + background + pseudo-element
14+
padding: 2px;
15+
background: linear-gradient(109.47deg, var(--color-accent-canteloupe-base) 0%, var(--color-accent-persimmon-base) 50%, var(--color-accent-plum-base) 100%);
16+
border-radius: 12px;
17+
width: 780px;
18+
box-shadow: 0 8px 24px rgb(var(--color-neutral-shadow-raw) / 24%), 0 4px 16px rgb(var(--color-neutral-shadow-raw) / 32%);
19+
position: relative;
20+
transform: translateY(-3rem);
21+
22+
// Inner content container with actual background
23+
&::before {
24+
content: "";
25+
position: absolute;
26+
inset: 2px;
27+
background: var(--color-neutral-background);
28+
opacity: 0.95;
29+
border-radius: 10px;
30+
z-index: 0;
31+
}
32+
33+
// All children need to be above the pseudo-element
34+
> * {
35+
position: relative;
36+
z-index: 1;
37+
}
38+
}
39+
40+
.content {
41+
padding: 3rem;
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
text-align: center;
46+
gap: var(--spacing-base);
47+
}
48+
49+
.badge {
50+
transform: scale(1.4);
51+
}
52+
53+
.title {
54+
// Typography component handles font styles
55+
margin: 0;
56+
}
57+
58+
.description {
59+
// Typography component handles font styles
60+
max-width: 600px;
61+
margin: 0;
62+
}
63+
64+
.actions {
65+
display: flex;
66+
gap: var(--spacing-base);
67+
margin-top: var(--spacing-tight);
68+
flex-wrap: wrap;
69+
justify-content: center;
70+
71+
button {
72+
white-space: nowrap;
73+
}
74+
}
75+

‎web/libs/ui/src/lib/enterprise-upgrade-overlay/enterprise-upgrade-overlay.stories.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { EnterpriseUpgradeOverlay } from "./enterprise-upgrade-overlay";
3+
4+
const meta: Meta<typeof EnterpriseUpgradeOverlay> = {
5+
component: EnterpriseUpgradeOverlay,
6+
title: "UI/EnterpriseUpgradeOverlay",
7+
argTypes: {
8+
title: { control: "text" },
9+
description: { control: "text" },
10+
feature: { control: "text" },
11+
learnMoreUrl: { control: "text" },
12+
primaryButtonLabel: { control: "text" },
13+
secondaryButtonLabel: { control: "text" },
14+
showLearnMore: { control: "boolean" },
15+
className: { control: "text" },
16+
"data-testid": { control: "text" },
17+
onContactSales: { action: "contact sales clicked" },
18+
onLearnMore: { action: "learn more clicked" },
19+
},
20+
decorators: [
21+
(Story) => (
22+
<div style={{ position: "relative", height: "600px", background: "var(--color-neutral-background)" }}>
23+
<Story />
24+
</div>
25+
),
26+
],
27+
};
28+
29+
export default meta;
30+
type Story = StoryObj<typeof EnterpriseUpgradeOverlay>;
31+
32+
/**
33+
* Default overlay with standard messaging
34+
*/
35+
export const Default: Story = {
36+
args: {},
37+
};
38+
39+
/**
40+
* Overlay customized for Project Dashboards feature
41+
*/
42+
export const ProjectDashboards: Story = {
43+
args: {
44+
title: "Get access to Project Dashboards!",
45+
description:
46+
"Performance analytics are available within the Enterprise plan. Contact our sales team to get access to this and more!",
47+
feature: "Project Dashboards",
48+
learnMoreUrl: "https://docs.humansignal.com/guide/dashboards.html",
49+
},
50+
};
51+
52+
/**
53+
* Overlay for SSO & Security features
54+
*/
55+
export const SSOAndSecurity: Story = {
56+
args: {
57+
title: "SSO & Advanced Security",
58+
description: "Enable Single Sign-On, advanced security features, and compliance tools with our Enterprise plan.",
59+
feature: "SSO & Security Features",
60+
learnMoreUrl: "https://docs.humansignal.com/guide/security.html",
61+
secondaryButtonLabel: "Learn more",
62+
},
63+
};
64+
65+
/**
66+
* Overlay for Custom Workflows
67+
*/
68+
export const CustomWorkflows: Story = {
69+
args: {
70+
title: "Advanced Workflows",
71+
description: "Create custom automation workflows and advanced labeling pipelines with our Enterprise plan.",
72+
feature: "Advanced Workflows",
73+
learnMoreUrl: "https://docs.humansignal.com/guide/workflows.html",
74+
},
75+
};
76+
77+
/**
78+
* Overlay without the "Learn More" button
79+
*/
80+
export const WithoutLearnMore: Story = {
81+
args: {
82+
title: "Premium Feature",
83+
description: "This feature is available exclusively in our Enterprise plan. Contact sales to learn more.",
84+
feature: "Premium Features",
85+
showLearnMore: false,
86+
},
87+
};
88+
89+
/**
90+
* Overlay with custom button labels
91+
*/
92+
export const CustomButtonLabels: Story = {
93+
args: {
94+
title: "Upgrade to Enterprise",
95+
description: "Access all premium features and dedicated support.",
96+
feature: "Enterprise Plan",
97+
primaryButtonLabel: "Talk to Sales",
98+
secondaryButtonLabel: "View Pricing",
99+
learnMoreUrl: "https://humansignal.com/pricing",
100+
},
101+
};
102+
103+
/**
104+
* Overlay shown in context over blurred content
105+
*/
106+
export const InContext: Story = {
107+
render: () => (
108+
<div style={{ position: "relative", height: "600px", background: "var(--color-neutral-background)" }}>
109+
<div style={{ padding: "32px", opacity: 0.5, filter: "blur(2px)" }}>
110+
<div style={{ marginBottom: "24px" }}>
111+
<h2 style={{ fontSize: "24px", fontWeight: 600, marginBottom: "8px", color: "var(--color-neutral-content)" }}>
112+
Project Performance Dashboard
113+
</h2>
114+
<p style={{ color: "var(--color-neutral-content-subtler)", marginBottom: "24px" }}>
115+
Track your team's annotation progress and quality metrics
116+
</p>
117+
</div>
118+
119+
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px", marginBottom: "32px" }}>
120+
<div style={{ padding: "20px", background: "var(--color-neutral-background-subtle)", borderRadius: "8px" }}>
121+
<div style={{ fontSize: "14px", color: "var(--color-neutral-content-subtler)", marginBottom: "8px" }}>
122+
Total Tasks
123+
</div>
124+
<div style={{ fontSize: "32px", fontWeight: 600, color: "var(--color-neutral-content)" }}>1,247</div>
125+
</div>
126+
<div style={{ padding: "20px", background: "var(--color-neutral-background-subtle)", borderRadius: "8px" }}>
127+
<div style={{ fontSize: "14px", color: "var(--color-neutral-content-subtler)", marginBottom: "8px" }}>
128+
Completed
129+
</div>
130+
<div style={{ fontSize: "32px", fontWeight: 600, color: "var(--color-positive-content)" }}>892</div>
131+
</div>
132+
<div style={{ padding: "20px", background: "var(--color-neutral-background-subtle)", borderRadius: "8px" }}>
133+
<div style={{ fontSize: "14px", color: "var(--color-neutral-content-subtler)", marginBottom: "8px" }}>
134+
Agreement Score
135+
</div>
136+
<div style={{ fontSize: "32px", fontWeight: 600, color: "var(--color-neutral-content)" }}>94%</div>
137+
</div>
138+
</div>
139+
140+
<div style={{ padding: "24px", background: "var(--color-neutral-background-subtle)", borderRadius: "8px" }}>
141+
<h3
142+
style={{ fontSize: "16px", fontWeight: 600, marginBottom: "16px", color: "var(--color-neutral-content)" }}
143+
>
144+
Annotation Velocity
145+
</h3>
146+
<div
147+
style={{
148+
height: "120px",
149+
background: "var(--color-neutral-background)",
150+
borderRadius: "4px",
151+
display: "flex",
152+
alignItems: "center",
153+
justifyContent: "center",
154+
color: "var(--color-neutral-content-subtler)",
155+
}}
156+
>
157+
Chart visualization would appear here
158+
</div>
159+
</div>
160+
</div>
161+
<EnterpriseUpgradeOverlay
162+
title="Get access to Project Dashboards!"
163+
description="Performance analytics are available within the Enterprise plan. Contact our sales team to get access to this and more!"
164+
feature="Dashboards"
165+
/>
166+
</div>
167+
),
168+
};

0 commit comments

Comments
 (0)