-
With a longer explaination
+
With a longer explanation
diff --git a/libs/ui-toolkit/src/components/callout/callout.tsx b/libs/ui-toolkit/src/components/callout/callout.tsx
index a226cb941..999058872 100644
--- a/libs/ui-toolkit/src/components/callout/callout.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.tsx
@@ -1,13 +1,13 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ReactElement } from 'react';
import classNames from 'classnames';
-import { getIntentShadow, Intent } from '../../utils/intent';
+import { getIntentBorder, Intent } from '../../utils/intent';
import { Loader } from '../loader';
import type { IconName } from '../icon';
import { Icon } from '../icon';
interface CalloutRootProps {
- children?: React.ReactNode;
- title?: React.ReactElement | string;
+ children?: ReactNode;
+ title?: ReactElement | string;
intent?: Intent;
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
isLoading?: boolean;
@@ -89,13 +89,10 @@ export function Callout({
const className = classNames(
'flex gap-20',
- 'border',
- 'border-black',
- 'dark:border-white',
'text-body-large',
'dark:text-white',
'p-16',
- getIntentShadow(intent)
+ getIntentBorder(intent)
);
const TitleTag: keyof JSX.IntrinsicElements = headingLevel
? `h${headingLevel}`
diff --git a/libs/ui-toolkit/src/components/checkbox/checkbox.spec.tsx b/libs/ui-toolkit/src/components/checkbox/checkbox.spec.tsx
new file mode 100644
index 000000000..49c7a5408
--- /dev/null
+++ b/libs/ui-toolkit/src/components/checkbox/checkbox.spec.tsx
@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Checkbox } from './checkbox';
+
+describe('Checkbox', () => {
+ it('should render checkbox with label successfully', () => {
+ render(
);
+ expect(screen.getByText('test')).toBeInTheDocument();
+ });
+
+ it('should render a checked checkbox if specified in state', () => {
+ render(
);
+ expect(screen.getByTestId('checkbox-checked')).toBeInTheDocument();
+ });
+
+ it('should render an unchecked checkbox if specified in state', () => {
+ render(
);
+ expect(screen.getByTestId('checkbox-unchecked')).toBeInTheDocument();
+ });
+
+ it('should render an indeterminate checkbox if specified in state', () => {
+ render(
);
+ expect(screen.getByTestId('checkbox-indeterminate')).toBeInTheDocument();
+ });
+
+ it('should render a checkbox in error if specified', () => {
+ render(
);
+ expect(screen.getByTestId('checkbox-error')).toBeInTheDocument();
+ });
+
+ it('should render a checked checkbox in error if specified', () => {
+ render(
);
+ expect(screen.getByTestId('checkbox-error-checked')).toBeInTheDocument();
+ });
+
+ it('should render an unchecked checkbox in error if specified', () => {
+ render(
+
+ );
+ expect(screen.getByTestId('checkbox-error-unchecked')).toBeInTheDocument();
+ });
+
+ it('should render an indeterminate checkbox in error if specified', () => {
+ render(
+
+ );
+ expect(
+ screen.getByTestId('checkbox-error-indeterminate')
+ ).toBeInTheDocument();
+ });
+
+ it('fires callback on change if provided', () => {
+ const callback = jest.fn();
+
+ render(
);
+
+ const checkbox = screen.getByText('onchange');
+ fireEvent.click(checkbox);
+ expect(callback.mock.calls.length).toEqual(1);
+ });
+});
diff --git a/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx b/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
new file mode 100644
index 000000000..e5dca2d87
--- /dev/null
+++ b/libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
@@ -0,0 +1,45 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Checkbox } from './checkbox';
+import { useState } from 'react';
+
+export default {
+ component: Checkbox,
+ title: 'Checkbox',
+} as ComponentMeta
;
+
+export const Controlled: ComponentStory = () => {
+ const [checkboxState, setCheckboxState] = useState<
+ 'checked' | 'unchecked' | 'indeterminate'
+ >('indeterminate');
+
+ return (
+ {
+ if (
+ checkboxState === 'indeterminate' ||
+ checkboxState === 'unchecked'
+ ) {
+ setCheckboxState('checked');
+ }
+
+ if (checkboxState === 'checked') {
+ setCheckboxState('unchecked');
+ }
+ }}
+ />
+ );
+};
+
+export const Default: ComponentStory = () => (
+
+);
+
+export const Error: ComponentStory = () => (
+
+);
+
+export const Disabled: ComponentStory = () => (
+
+);
diff --git a/libs/ui-toolkit/src/components/checkbox/checkbox.tsx b/libs/ui-toolkit/src/components/checkbox/checkbox.tsx
new file mode 100644
index 000000000..e9928f221
--- /dev/null
+++ b/libs/ui-toolkit/src/components/checkbox/checkbox.tsx
@@ -0,0 +1,81 @@
+import classnames from 'classnames';
+import { Icon } from '../icon';
+import type { ChangeEvent, InputHTMLAttributes } from 'react';
+
+export interface CheckboxProps extends InputHTMLAttributes {
+ label: string;
+ className?: string;
+ state?: 'checked' | 'unchecked' | 'indeterminate';
+ error?: boolean;
+ onChange?: (e: ChangeEvent) => void;
+}
+
+export const Checkbox = ({
+ label,
+ className,
+ state,
+ error,
+ onChange,
+ ...props
+}: CheckboxProps) => {
+ const containerClasses = classnames(
+ className,
+ 'grid grid-cols-[auto_1fr] select-none'
+ );
+ const inputClasses = 'sr-only peer';
+ const vegaCheckboxClasses = classnames(
+ 'col-start-1 row-start-1',
+ 'inline-block w-20 h-20 relative z-0',
+ 'shadow-input dark:shadow-input-dark bg-white dark:bg-white-25',
+ 'focus-visible:outline-none focus-visible:shadow-checkbox-focus dark:focus-visible:shadow-checkbox-focus-dark',
+ 'cursor-pointer peer-disabled:cursor-default',
+ {
+ 'input-border dark:input-border-dark': !error,
+ 'border border-vega-red': error,
+ }
+ );
+ // In uncontrolled elements without state, we apply the hidden class and 'peer-checked' can
+ // override it as necessary. At other times, we control display properties via state conditions.
+ const iconClasses = classnames(
+ 'col-start-1 row-start-1 place-self-center relative z-50 pointer-events-none',
+ {
+ hidden: !state || state === 'unchecked',
+ }
+ );
+ const tickClasses = classnames(iconClasses, {
+ 'peer-checked:block': !state,
+ block: state === 'checked',
+ hidden: state === 'indeterminate',
+ });
+ const minusClasses = classnames(iconClasses, {
+ block: state === 'indeterminate',
+ hidden: state === 'checked',
+ });
+ const labelClasses = classnames(
+ 'col-start-2 row-start-1 pl-8 cursor-pointer peer-disabled:cursor-default'
+ );
+
+ return (
+
+ );
+};
diff --git a/libs/ui-toolkit/src/components/checkbox/index.ts b/libs/ui-toolkit/src/components/checkbox/index.ts
new file mode 100644
index 000000000..8d78b3e23
--- /dev/null
+++ b/libs/ui-toolkit/src/components/checkbox/index.ts
@@ -0,0 +1 @@
+export * from './checkbox';
diff --git a/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx b/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx
index 968e276ba..f06014142 100644
--- a/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx
+++ b/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx
@@ -15,7 +15,9 @@ const Template: ComponentStory = (args) => {
return (
-
+
);
};
@@ -23,38 +25,38 @@ const Template: ComponentStory = (args) => {
export const Default = Template.bind({});
Default.args = {
open: false,
- title: 'Title',
+ title: 'No intent supplied',
children: Some content
,
};
+export const Primary = Template.bind({});
+Primary.args = {
+ open: false,
+ title: 'Intent: Primary',
+ children: Some content
,
+ intent: Intent.Primary,
+};
+
export const Danger = Template.bind({});
Danger.args = {
open: false,
- title: 'Danger',
+ title: 'Intent: Danger',
children: Some content
,
intent: Intent.Danger,
};
-export const Success = Template.bind({});
-Success.args = {
- open: false,
- title: 'Success',
- children: Some content
,
- intent: Intent.Success,
-};
-
export const Warning = Template.bind({});
Warning.args = {
open: false,
- title: 'Warning',
+ title: 'Intent: Warning',
children: Some content
,
intent: Intent.Warning,
};
-export const Modal = Template.bind({});
-Modal.args = {
+export const Success = Template.bind({});
+Success.args = {
open: false,
- title: 'Modal (Prompt)',
+ title: 'Intent: Success',
children: Some content
,
- intent: Intent.Warning,
+ intent: Intent.Success,
};
diff --git a/libs/ui-toolkit/src/components/dialog/dialog.tsx b/libs/ui-toolkit/src/components/dialog/dialog.tsx
index e7c7309ca..e6bf068b7 100644
--- a/libs/ui-toolkit/src/components/dialog/dialog.tsx
+++ b/libs/ui-toolkit/src/components/dialog/dialog.tsx
@@ -2,7 +2,7 @@ import * as DialogPrimitives from '@radix-ui/react-dialog';
import classNames from 'classnames';
import type { ReactNode } from 'react';
import type { Intent } from '../../utils/intent';
-import { getIntentShadow } from '../../utils/intent';
+import { getIntentShadow, getIntentBorder } from '../../utils/intent';
import { Icon } from '../icon';
interface DialogProps {
@@ -30,6 +30,7 @@ export function Dialog({
// Need to apply background and text colors again as content is rendered in a portal
'dark:bg-black dark:text-white-95 bg-white text-black-95',
getIntentShadow(intent),
+ getIntentBorder(intent),
contentClassNames
);
return (
@@ -41,10 +42,13 @@ export function Dialog({
/>
-
+
{title && (
{
return (
-
-
+
+ Select many things
-
+
{checkboxItems.map(({ label, state: [checked, setChecked] }) => (
-
-
-
{label}
))}
@@ -56,13 +50,13 @@ export const CheckboxItems = () => {
export const RadioItems = () => {
const files = ['README.md', 'index.js', 'page.css'];
- const [file, setFile] = useState(files[1]);
+ const [selected, setSelected] = useState(files[1]);
return (
-
+ Open
console.log('minimize')}>
@@ -75,19 +69,38 @@ export const RadioItems = () => {
Smaller
-
+
{files.map((file) => (
{file}
-
-
-
))}
-
Selected file: {file}
+
Selected file: {selected}
+
+ );
+};
+
+export const IconMenu = () => {
+ const iconMenuItems = [
+ { label: 'IconMenu Item 1' },
+ { label: 'IconMenu Item 2' },
+ ];
+
+ return (
+
+
+
+
+
+
+ {iconMenuItems.map(({ label }) => (
+ {label}
+ ))}
+
+
);
};
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
index 7073e7e77..7eaaf2529 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,34 +1,31 @@
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import classNames from 'classnames';
import { forwardRef } from 'react';
+import { Button } from '../button';
-const itemStyles = classNames([
- 'text-ui',
- 'text-black',
- 'dark:text-white',
- 'flex',
- 'items-center',
- 'justify-between',
- 'leading-1',
+const itemClass = classNames(
+ 'relative',
+ 'flex items-center justify-between',
+ 'text-ui leading-1',
+ 'h-[25px]',
+ 'py-0 pr-8',
'cursor-default',
+ 'hover:cursor-pointer',
'select-none',
'whitespace-nowrap',
- 'h-[25px]',
- 'py-0',
- 'pr-8',
- 'color-black',
-]);
+ 'focus:bg-vega-pink dark:focus:bg-vega-yellow',
+ 'focus:text-white dark:focus:text-black',
+ 'focus:outline-none'
+);
-const itemClass = classNames(itemStyles, [
- 'focus:bg-vega-yellow',
- 'dark:focus:bg-vega-yellow',
- 'focus:text-black',
- 'dark:focus:text-black',
- 'focus:outline-none',
-]);
-
-function getItemClasses(inset: boolean) {
- return classNames(itemClass, inset ? 'pl-28' : 'pl-4', 'relative');
+function getItemClasses(inset: boolean, checked?: boolean) {
+ return classNames(
+ itemClass,
+ inset ? 'pl-28' : 'pl-8',
+ checked
+ ? 'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black'
+ : 'text-black dark:text-white'
+ );
}
/**
@@ -40,7 +37,25 @@ export const DropdownMenu = DropdownMenuPrimitive.Root;
* The button that toggles the dropdown menu.
* By default, the {@link DropdownMenuContent} will position itself against the trigger.
*/
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuTrigger = forwardRef<
+ React.ElementRef,
+ React.ComponentProps
+>(({ children, className }, forwardedRef) => (
+
+
+
+));
/**
* Used to group multiple {@link DropdownMenuRadioItem}s.
@@ -58,7 +73,7 @@ export const DropdownMenuContent = forwardRef<
{...contentProps}
ref={forwardedRef}
className={classNames(
- 'inline-block box-border border-1 border-black bg-white dark:bg-black p-4',
+ 'inline-block box-border border-1 border-black bg-white dark:bg-black-60',
className
)}
/>
@@ -92,7 +107,12 @@ export const DropdownMenuCheckboxItem = forwardRef<
));
diff --git a/libs/ui-toolkit/src/components/form-group/form-group.tsx b/libs/ui-toolkit/src/components/form-group/form-group.tsx
index 5dcbed6c2..ce3575844 100644
--- a/libs/ui-toolkit/src/components/form-group/form-group.tsx
+++ b/libs/ui-toolkit/src/components/form-group/form-group.tsx
@@ -1,32 +1,49 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
+import classnames from 'classnames';
interface FormGroupProps {
children: ReactNode;
label?: string;
labelFor?: string;
labelAlign?: 'left' | 'right';
+ labelDescription?: string;
className?: string;
+ hasError?: boolean;
}
export const FormGroup = ({
children,
label,
labelFor,
+ labelDescription,
labelAlign = 'left',
className,
+ hasError,
}: FormGroupProps) => {
- const labelClasses = classNames('block text-ui mb-4', {
- 'text-right': labelAlign === 'right',
- });
return (
{label && (
-