From a51a04c97be9029f67989139b557da7cced7fbdc Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Wed, 16 Mar 2022 12:57:24 +0000
Subject: [PATCH] Added a lozenge to the ui toolkit

---
 libs/tailwindcss-config/src/theme.js          |  9 +++++
 .../src/components/lozenge/index.ts           |  1 +
 .../src/components/lozenge/lozenge.spec.tsx   | 10 +++++
 .../components/lozenge/lozenge.stories.tsx    | 34 +++++++++++++++++
 .../src/components/lozenge/lozenge.tsx        | 38 +++++++++++++++++++
 5 files changed, 92 insertions(+)
 create mode 100644 libs/ui-toolkit/src/components/lozenge/index.ts
 create mode 100644 libs/ui-toolkit/src/components/lozenge/lozenge.spec.tsx
 create mode 100644 libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/lozenge/lozenge.tsx

diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 4bc3462b1..b5f47045a 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/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,
diff --git a/libs/ui-toolkit/src/components/lozenge/index.ts b/libs/ui-toolkit/src/components/lozenge/index.ts
new file mode 100644
index 000000000..df4ba1467
--- /dev/null
+++ b/libs/ui-toolkit/src/components/lozenge/index.ts
@@ -0,0 +1 @@
+export * from './lozenge';
diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.spec.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.spec.tsx
new file mode 100644
index 000000000..6da383483
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx
new file mode 100644
index 000000000..7d01701bf
--- /dev/null
+++ b/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',
+};
diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
new file mode 100644
index 000000000..e12fd4020
--- /dev/null
+++ b/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>
+  );
+};