#213,#212: Pill and Page Header Components

packages/ui/README.md

@@ -60,6 +60,10 @@ Tailoring lyric-ui components to a target application is done by overriding CSS
 | `--color-input`                  | `hsl(214.3 31.8% 91.4%)` | Input field border color                                            |
 | `--color-ring`                   | `hsl(222.2 84% 4.9%)`    | Focus ring color for interactive elements                           |
 | `--radius`                       | `0.5rem`                 | Base border-radius used across components                           |
+| `--color-pill-error`             | `#ffccc7`                | Background color for error/failed pill badges                       |
+| `--color-pill-success`           | `#52c41a`                | Background color for success pill badges                            |
+| `--color-pill-warning`           | `#ffff7a`                | Background color for warning pill badges                            |
+| `--color-pill-default`           | `#f9fafb`                | Background color for default/neutral pill badges                    |
 
 Your main css file should look something like this:
 
@@ -106,6 +110,15 @@ You could theoretically add values directly into `:root`, but defining them in `
 
 > NOTE: Because tailwind is being bundled with these exported components, it's worth noting that a project also using tailwind may possibly overlap on styles. This won't functionally affect the project, but may cause unintended visual issues.
 
+#### Custom Components
+
+Some components are not exported from shadcn and are custom. As a result, the consumer cannot change the color from their own .css file. If they wish to change the styles of a custom component, use the customStyles that are provided as props.
+
+Custom Components
+
+- pill
+- headertext
+
 ---
 
 ## Adding new components from Shadcn

packages/ui/src/components/ui/headertext/header.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderText } from './headertext';
+
+const meta: Meta<typeof HeaderText> = {
+	title: 'Components/HeaderText',
+	component: HeaderText,
+	tags: ['autodocs'],
+	argTypes: {
+		status: {
+			control: 'select',
+			options: ['default', 'error', 'warning', 'success'],
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HeaderText>;
+
+export const ValidationInProgress: Story = {
+	args: {
+		title: 'Submission TEST-12456',
+		status: 'default',
+	},
+};
+
+export const ReadyForValidation: Story = {
+	args: {
+		title: 'New Submission',
+		status: 'success',
+	},
+};
+
+export const ActionRequired: Story = {
+	args: {
+		title: 'New Submission',
+		status: 'warning',
+	},
+};
+
+export const Error: Story = {
+	args: {
+		title: 'Submission TEST-12456',
+		status: 'error',
+	},
+};
+
+export const NoStatus: Story = {
+	args: {
+		title: 'New Submission',
+	},
+};

packages/ui/src/components/ui/headertext/headertext.tsx

@@ -0,0 +1,23 @@
+import { cn } from 'cn';
+import * as React from 'react';
+
+import { Pill, type PillStatus } from '@/components/ui/pill/pill';
+
+export interface HeaderTextProps extends React.HTMLAttributes<HTMLDivElement> {
+	title: string;
+	status?: PillStatus;
+	customStatus?: string;
+	pillStyles?: string;
+}
+
+const HeaderText = React.forwardRef<HTMLDivElement, HeaderTextProps>(
+	({ className, title, status, customStatus, pillStyles, ...props }, ref) => (
+		<div ref={ref} className={cn('flex items-center gap-3', className)} {...props}>
+			<h1 className="text-2xl font-bold">{title}</h1>
+			{status && <Pill status={status} customStatus={customStatus} className={pillStyles} />}
+		</div>
+	),
+);
+HeaderText.displayName = 'HeaderText';
+
+export { HeaderText };

packages/ui/src/components/ui/pill/pill.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pill } from './pill';
+
+const meta: Meta<typeof Pill> = {
+	title: 'Components/Pill',
+	component: Pill,
+	tags: ['autodocs'],
+	argTypes: {
+		status: {
+			control: 'select',
+			options: ['default', 'error', 'warning', 'success'],
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pill>;
+
+export const ValidationInProgress: Story = {
+	args: {
+		status: 'default',
+	},
+};
+
+export const ReadyForValidation: Story = {
+	args: {
+		status: 'success',
+	},
+};
+
+export const ActionRequired: Story = {
+	args: {
+		status: 'warning',
+	},
+};
+
+export const Error: Story = {
+	args: {
+		status: 'error',
+	},
+};

packages/ui/src/components/ui/pill/pill.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from 'cn';
+import * as React from 'react';
+
+const pillVariants = cva('inline-flex items-center rounded-md border bg-transparent px-3 py-1 text-xs font-medium', {
+	variants: {
+		status: {
+			default: 'bg-pill-default/25 border-pill-default',
+			success: 'bg-pill-success/25 border-pill-success',
+			warning: 'bg-pill-warning/25 border-pill-warning',
+			error: 'bg-pill-error/25 border-pill-error',
+		},
+	},
+});
+
+export type PillStatus = NonNullable<VariantProps<typeof pillVariants>['status']>;
+
+const pillStatusLabels: Record<PillStatus, string> = {
+	default: 'Validation in Progress',
+	success: 'Ready for Validation',
+	warning: 'Action Required',
+	error: 'Errors Found',
+};
+
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
+	status: PillStatus;
+	customStatus?: string;
+	className?: string;
+}
+
+const Pill = React.forwardRef<HTMLSpanElement, PillProps>(({ className, status, customStatus, ...props }, ref) => (
+	<span ref={ref} className={cn(pillVariants({ status }), className)} {...props}>
+		{customStatus ? customStatus : pillStatusLabels[status]}
+	</span>
+));
+Pill.displayName = 'Pill';
+
+export { Pill, pillStatusLabels, pillVariants };

packages/ui/src/index.ts

@@ -1,4 +1,5 @@
 import './style.css';
 
 export { Button, type ButtonProps, buttonVariants } from './components/ui/button';
-export { cn } from './lib/utils';
+export * from './components/ui/headertext/headertext';
+export * from './components/ui/pill/pill';

packages/ui/src/style.css

@@ -26,6 +26,12 @@
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);
+
+	/* Pill CUSTOM*/
+	--color-pill-error: #ffccc7;
+	--color-pill-success: #52c41a;
+	--color-pill-warning: #ffff7a;
+	--color-pill-default: #d0d2d3;
 }
 
 @layer base {