Added a lozenge to the ui toolkit

libs/tailwindcss-config/src/theme.js

@@ -46,6 +46,7 @@ module.exports = {
       prompt: '#EDFF22',
       success: '#26FF8A',
       help: '#494949',
+      highlight: '#E5E5E5',
     },
     'intent-background': {
       danger: '#9E0025', // for white text
@@ -93,6 +94,14 @@ module.exports = {
     1: '1px',
     4: '4px',
   },
+  borderRadius: {
+    none: '0',
+    sm: '0.125rem',
+    DEFAULT: '0.225rem',
+    md: '0.3rem',
+    lg: '0.5rem',
+    full: '9999px',
+  },
   fontFamily: {
     mono: defaultTheme.fontFamily.mono,
     serif: defaultTheme.fontFamily.serif,

libs/ui-toolkit/src/components/lozenge/index.ts

@@ -0,0 +1 @@
+export * from './lozenge';

libs/ui-toolkit/src/components/lozenge/lozenge.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { Lozenge } from './lozenge';
+
+describe('Lozenge', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Lozenge>Lozenge</Lozenge>);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx

@@ -0,0 +1,34 @@
+import { Story, Meta } from '@storybook/react';
+import { Lozenge } from './lozenge';
+
+export default {
+  component: Lozenge,
+  title: 'Lozenge',
+} as Meta;
+
+const Template: Story = (args) => <Lozenge {...args}>lozenge</Lozenge>;
+
+export const WithDetails = Template.bind({});
+WithDetails.args = {
+  details: 'details text',
+};
+
+export const Highlight = Template.bind({});
+Highlight.args = {
+  variant: 'highlight',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+};

libs/ui-toolkit/src/components/lozenge/lozenge.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames';
+
+interface LozengeProps {
+  children: ReactNode;
+  variant?: 'success' | 'warning' | 'danger' | 'highlight';
+  className?: string;
+  details?: string;
+}
+
+const getWrapperClasses = (className: LozengeProps['className']) => {
+  return classNames('inline-flex items-center gap-4', className);
+};
+
+const getLozengeClasses = (variant: LozengeProps['variant']) => {
+  return classNames(['rounded-md', 'font-mono', 'leading-none', 'p-4'], {
+    'bg-intent-success text-black': variant === 'success',
+    'bg-intent-danger text-white': variant === 'danger',
+    'bg-intent-warning text-black': variant === 'warning',
+    'bg-intent-highlight text-black': variant === 'highlight',
+    'bg-intent-help text-white': !variant,
+  });
+};
+
+export const Lozenge = ({
+  children,
+  variant,
+  className,
+  details,
+}: LozengeProps) => {
+  return (
+    <span className={getWrapperClasses(className)}>
+      <span className={getLozengeClasses(variant)}>{children}</span>
+
+      {details && <span>{details}</span>}
+    </span>
+  );
+};