@hubspot/app-connect-sdk 1.0.0-alpha.23 → 1.0.0-alpha.25

package/src/browser/react/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,95 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { RadioGroup } from './RadioGroup.tsx';
+
+const options = [
+  { value: 'free', label: 'Free' },
+  { value: 'pro', label: 'Pro' },
+  { value: 'enterprise', label: 'Enterprise', disabled: true },
+];
+
+afterEach(cleanup);
+
+describe('RadioGroup', () => {
+  it('renders a radio input for each option', () => {
+    render(<RadioGroup name="plan" options={options} />);
+    expect(screen.getAllByRole('radio')).toHaveLength(3);
+  });
+
+  it('renders each option label', () => {
+    render(<RadioGroup name="plan" options={options} />);
+    expect(screen.getByLabelText('Free')).toBeInTheDocument();
+    expect(screen.getByLabelText('Pro')).toBeInTheDocument();
+    expect(screen.getByLabelText('Enterprise')).toBeInTheDocument();
+  });
+
+  it('renders group label as legend', () => {
+    render(<RadioGroup name="plan" options={options} label="Choose a plan" />);
+    expect(screen.getByText('Choose a plan')).toBeInTheDocument();
+  });
+
+  it('renders hint text', () => {
+    render(
+      <RadioGroup name="plan" options={options} hint="Select one option." />
+    );
+    expect(screen.getByText('Select one option.')).toBeInTheDocument();
+  });
+
+  it('renders error text', () => {
+    render(
+      <RadioGroup name="plan" options={options} error="Please select a plan." />
+    );
+    expect(screen.getByText('Please select a plan.')).toBeInTheDocument();
+  });
+
+  it('hides hint when error is also provided', () => {
+    render(
+      <RadioGroup name="plan" options={options} hint="Hint" error="Error" />
+    );
+    expect(screen.queryByText('Hint')).not.toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('disables individual option', () => {
+    render(<RadioGroup name="plan" options={options} />);
+    expect(screen.getByLabelText('Enterprise')).toBeDisabled();
+  });
+
+  it('disables all options when group disabled is true', () => {
+    render(<RadioGroup name="plan" options={options} disabled />);
+    screen.getAllByRole('radio').forEach((r) => expect(r).toBeDisabled());
+  });
+
+  it('respects controlled value', () => {
+    render(
+      <RadioGroup
+        name="plan"
+        options={options}
+        value="pro"
+        onChange={vi.fn()}
+      />
+    );
+    expect(screen.getByLabelText('Pro')).toBeChecked();
+    expect(screen.getByLabelText('Free')).not.toBeChecked();
+  });
+
+  it('respects defaultValue for uncontrolled usage', () => {
+    render(<RadioGroup name="plan" options={options} defaultValue="free" />);
+    expect(screen.getByLabelText('Free')).toBeChecked();
+  });
+
+  it('calls onChange with the selected value string', () => {
+    const onChange = vi.fn();
+    render(<RadioGroup name="plan" options={options} onChange={onChange} />);
+    fireEvent.click(screen.getByLabelText('Pro'));
+    expect(onChange).toHaveBeenCalledWith('pro');
+  });
+
+  it('forwards custom className', () => {
+    const { container } = render(
+      <RadioGroup name="plan" options={options} className="custom" />
+    );
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/browser/react/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,109 @@
+import { useId } from 'react';
+
+import * as styles from './RadioGroup.css.ts';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  name: string;
+  options: RadioOption[];
+  label?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function RadioGroup({
+  name,
+  options,
+  label,
+  value,
+  defaultValue,
+  onChange,
+  hint,
+  error,
+  disabled = false,
+  className,
+}: RadioGroupProps) {
+  const groupId = useId();
+  const descriptionId = (error ?? hint) ? `${groupId}-description` : undefined;
+
+  return (
+    <fieldset
+      className={[styles.fieldset, className].filter(Boolean).join(' ')}
+      aria-describedby={descriptionId}
+    >
+      {label && <legend className={styles.legend}>{label}</legend>}
+      <div className={styles.optionList}>
+        {options.map((option) => {
+          const optionId = `${groupId}-${option.value}`;
+          const isDisabled = disabled || option.disabled;
+          const rowClassName = [
+            styles.row,
+            isDisabled ? styles.rowDisabled : undefined,
+          ]
+            .filter(Boolean)
+            .join(' ');
+          const circleClassName = [
+            styles.circle,
+            error ? styles.circleError : undefined,
+          ]
+            .filter(Boolean)
+            .join(' ');
+
+          return (
+            <label
+              key={option.value}
+              className={rowClassName}
+              htmlFor={optionId}
+            >
+              <input
+                type="radio"
+                id={optionId}
+                name={name}
+                value={option.value}
+                disabled={isDisabled}
+                checked={
+                  value !== undefined ? value === option.value : undefined
+                }
+                defaultChecked={
+                  value === undefined && defaultValue !== undefined
+                    ? defaultValue === option.value
+                    : undefined
+                }
+                onChange={
+                  onChange
+                    ? (e) => {
+                        if (e.target.checked) onChange(option.value);
+                      }
+                    : undefined
+                }
+                className={styles.nativeInput}
+                aria-invalid={error ? true : undefined}
+              />
+              <span className={circleClassName} aria-hidden="true" />
+              <span className={styles.labelText}>{option.label}</span>
+            </label>
+          );
+        })}
+      </div>
+      {error ? (
+        <span id={descriptionId} className={styles.error}>
+          {error}
+        </span>
+      ) : hint ? (
+        <span id={descriptionId} className={styles.hint}>
+          {hint}
+        </span>
+      ) : null}
+    </fieldset>
+  );
+}

package/src/browser/react/components/RadioGroup/index.ts

@@ -0,0 +1,5 @@
+export {
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioOption,
+} from './RadioGroup.tsx';

package/src/browser/react/components/Select/Select.css.ts

@@ -0,0 +1,95 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+import { fontFamily, typeScale } from '../../../typography-tokens.ts';
+
+export const field = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeVars.space[100],
+});
+
+export const label = style({
+  fontFamily: fontFamily.display,
+  fontSize: typeScale.label.fontSize,
+  lineHeight: typeScale.label.lineHeight,
+  fontWeight: typeScale.label.fontWeight,
+  color: themeVars.text.core.default,
+});
+
+export const wrapper = style({
+  position: 'relative',
+  display: 'block',
+});
+
+// Chevron encoded as inline SVG — uses a neutral gray that reads well on white
+const chevronSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`;
+
+export const select = style({
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  font: 'inherit',
+  fontSize: 14,
+  width: '100%',
+  minHeight: '40px',
+  paddingBlock: 0,
+  paddingInlineStart: themeVars.space[300],
+  paddingInlineEnd: themeVars.space[800],
+  fontFamily: fontFamily.display,
+  color: themeVars.text.core.default,
+  backgroundColor: themeVars.fill.surface.recessed.default,
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: themeVars.border.core.disabled,
+  borderRadius: themeVars.borderRadius[300],
+  backgroundImage: chevronSvg,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: `right ${themeVars.space[300]} center`,
+  cursor: 'pointer',
+  transition: 'border-color 120ms ease',
+  selectors: {
+    '&:hover:not(:disabled):not(:focus-visible)': {
+      borderColor: themeVars.border.core.default,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${themeVars.fill.brand.default}`,
+      outlineOffset: '2px',
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      backgroundColor: themeVars.fill.tertiary.disabled,
+      borderColor: themeVars.border.core.disabled,
+      color: themeVars.text.core.disabled,
+    },
+  },
+});
+
+export const selectVariant = styleVariants({
+  default: {},
+  error: {
+    borderColor: themeVars.border.alert.default,
+    selectors: {
+      '&:hover:not(:disabled):not(:focus-visible)': {
+        borderColor: themeVars.border.alert.default,
+      },
+      '&:focus-visible': {
+        outline: `2px solid ${themeVars.border.alert.default}`,
+      },
+    },
+  },
+});
+
+export const hint = style({
+  fontFamily: fontFamily.display,
+  fontSize: typeScale.label.fontSize,
+  lineHeight: typeScale.label.lineHeight,
+  color: themeVars.text.core.subtle,
+});
+
+export const error = style({
+  fontFamily: fontFamily.display,
+  fontSize: typeScale.label.fontSize,
+  lineHeight: typeScale.label.lineHeight,
+  color: themeVars.text.alert.default,
+});

package/src/browser/react/components/Select/Select.test.tsx

@@ -0,0 +1,105 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { Select } from './Select.tsx';
+
+const options = [
+  { value: 'us', label: 'United States' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'mx', label: 'Mexico', disabled: true },
+];
+
+afterEach(cleanup);
+
+describe('Select', () => {
+  it('renders as a <select> element', () => {
+    render(<Select options={options} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('renders all options', () => {
+    render(<Select options={options} />);
+    expect(
+      screen.getByRole('option', { name: 'United States' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Canada' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mexico' })).toBeInTheDocument();
+  });
+
+  it('renders a hidden disabled placeholder option', () => {
+    const { container } = render(
+      <Select options={options} placeholder="Choose a country" />
+    );
+    const placeholder = container.querySelector('option[value=""]');
+    expect(placeholder).toBeInTheDocument();
+    expect(placeholder).toBeDisabled();
+    expect(placeholder).toHaveAttribute('hidden');
+  });
+
+  it('renders label and associates it with the select', () => {
+    render(<Select options={options} label="Country" />);
+    expect(screen.getByLabelText('Country')).toBeInTheDocument();
+  });
+
+  it('renders hint text', () => {
+    render(
+      <Select options={options} hint="Select your country of residence." />
+    );
+    expect(
+      screen.getByText('Select your country of residence.')
+    ).toBeInTheDocument();
+  });
+
+  it('renders error text', () => {
+    render(<Select options={options} error="Please select a country." />);
+    expect(screen.getByText('Please select a country.')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid when error is provided', () => {
+    render(<Select options={options} error="Required" />);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-invalid',
+      'true'
+    );
+  });
+
+  it('hides hint when error is also provided', () => {
+    render(<Select options={options} hint="Hint" error="Error" />);
+    expect(screen.queryByText('Hint')).not.toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('forwards disabled prop', () => {
+    render(<Select options={options} disabled />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('disables individual options', () => {
+    render(<Select options={options} />);
+    expect(screen.getByRole('option', { name: 'Mexico' })).toBeDisabled();
+  });
+
+  it('merges custom className onto the select element', () => {
+    render(<Select options={options} className="custom" />);
+    expect(screen.getByRole('combobox')).toHaveClass('custom');
+  });
+
+  it('forwards data-testid', () => {
+    render(<Select options={options} data-testid="my-select" />);
+    expect(screen.getByTestId('my-select')).toBeInTheDocument();
+  });
+
+  it('applies distinct className for error vs default', () => {
+    const { rerender } = render(<Select options={options} />);
+    const defaultClass = screen.getByRole('combobox').className;
+    rerender(<Select options={options} error="oops" />);
+    expect(screen.getByRole('combobox').className).not.toBe(defaultClass);
+  });
+
+  it('calls onChange when selection changes', () => {
+    const onChange = vi.fn();
+    render(<Select options={options} onChange={onChange} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'ca' } });
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+});

package/src/browser/react/components/Select/Select.tsx

@@ -0,0 +1,84 @@
+import { useId, type SelectHTMLAttributes } from 'react';
+
+import * as styles from './Select.css.ts';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export function Select({
+  label,
+  hint,
+  error,
+  options,
+  placeholder,
+  id: idProp,
+  className,
+  disabled,
+  ...rest
+}: SelectProps) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const descriptionId = (error ?? hint) ? `${id}-description` : undefined;
+
+  const selectClassName = [
+    styles.select,
+    styles.selectVariant[error ? 'error' : 'default'],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={styles.field}>
+      {label && (
+        <label className={styles.label} htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <div className={styles.wrapper}>
+        <select
+          {...rest}
+          id={id}
+          disabled={disabled}
+          className={selectClassName}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={descriptionId}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      {error ? (
+        <span id={descriptionId} className={styles.error}>
+          {error}
+        </span>
+      ) : hint ? (
+        <span id={descriptionId} className={styles.hint}>
+          {hint}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/browser/react/components/Select/index.ts

@@ -0,0 +1 @@
+export { Select, type SelectOption, type SelectProps } from './Select.tsx';

package/src/browser/react/components/ShareButton/ShareButton.css.ts

@@ -1,48 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { themeVars } from '../../../theme.css.ts';
-
-const shareBorder = '#cbd6e2';
-const shareText = '#33475b';
-
 export const styles = {
-  shareButton: style({
-    flexShrink: 0,
-    appearance: 'none',
-    WebkitAppearance: 'none',
-    margin: 0,
-    fontFamily: 'inherit',
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: 1,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: themeVars.space[200],
-    padding: `8px ${themeVars.space[300]}`,
-    color: shareText,
-    backgroundColor: themeVars.fill.surface.default.default,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: shareBorder,
-    borderRadius: 100,
-    transition:
-      'background-color 120ms ease, border-color 120ms ease, color 120ms ease',
-    selectors: {
-      '&:hover:not(:disabled)': {
-        backgroundColor: '#f5f8fa',
-      },
-      '&:focus-visible': {
-        outline: `2px solid ${themeVars.border.tertiary.default}`,
-        outlineOffset: 2,
-      },
-      '&:disabled': {
-        cursor: 'not-allowed',
-        opacity: 0.55,
-      },
-    },
-  }),
   shareIcon: style({
     width: 16,
     height: 16,

package/src/browser/react/components/ShareButton/ShareButton.tsx

@@ -1,3 +1,4 @@
+import { Button } from '../Button/Button.tsx';
 import { ShareIcon } from '../icons/ShareIcon.tsx';
 import { styles } from './ShareButton.css.ts';
 
@@ -31,13 +32,14 @@ export interface ShareButtonProps {
 
 export function ShareButton({ pageTitle }: ShareButtonProps) {
   return (
-    <button
+    <Button
       type="button"
-      className={styles.shareButton}
+      variant="outline"
+      size="xs"
       onClick={() => void shareAppConnectPage({ pageTitle })}
     >
       <ShareIcon className={styles.shareIcon} />
       <span>Share</span>
-    </button>
+    </Button>
   );
 }

package/src/browser/react/components/Text/Text.css.ts

@@ -0,0 +1,26 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+import { fontFamily, typeScale } from '../../../typography-tokens.ts';
+
+export const color = styleVariants({
+  black: { color: themeVars.text.core.default },
+  gray: { color: themeVars.text.core.subtle },
+});
+
+export const variant = styleVariants({
+  display: { fontFamily: fontFamily.display, ...typeScale.display },
+  h1: { fontFamily: fontFamily.display, ...typeScale.h1 },
+  h2: { fontFamily: fontFamily.display, ...typeScale.h2 },
+  h3: { fontFamily: fontFamily.display, ...typeScale.h3 },
+  h4: { fontFamily: fontFamily.display, ...typeScale.h4 },
+  body: { fontFamily: fontFamily.system, ...typeScale.body },
+  label: { fontFamily: fontFamily.system, ...typeScale.label },
+  eyebrow: {
+    fontFamily: fontFamily.system,
+    ...typeScale.eyebrow,
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase',
+  },
+  mono: { fontFamily: fontFamily.mono, ...typeScale.mono },
+});

package/src/browser/react/components/Text/Text.test.tsx

@@ -0,0 +1,63 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { Text, type TextVariant } from './Text.tsx';
+
+afterEach(cleanup);
+
+describe('Text', () => {
+  it('renders body variant as <p> by default', () => {
+    render(<Text variant="body">hello</Text>);
+    expect(screen.getByText('hello').tagName).toBe('P');
+  });
+
+  const defaultElements: Array<[TextVariant, string]> = [
+    ['display', 'P'],
+    ['h1', 'H1'],
+    ['h2', 'H2'],
+    ['h3', 'H3'],
+    ['h4', 'H4'],
+    ['body', 'P'],
+    ['label', 'SPAN'],
+    ['eyebrow', 'SPAN'],
+    ['mono', 'SPAN'],
+  ];
+
+  for (const [variant, tag] of defaultElements) {
+    it(`renders ${variant} as <${tag.toLowerCase()}> by default`, () => {
+      render(<Text variant={variant}>text</Text>);
+      expect(screen.getByText('text').tagName).toBe(tag);
+    });
+  }
+
+  it('overrides element with the as prop', () => {
+    render(
+      <Text variant="label" as="p">
+        override
+      </Text>
+    );
+    expect(screen.getByText('override').tagName).toBe('P');
+  });
+
+  it('merges className with the variant class', () => {
+    render(<Text className="custom">text</Text>);
+    expect(screen.getByText('text')).toHaveClass('custom');
+  });
+
+  it('forwards arbitrary HTML attributes', () => {
+    render(
+      <Text data-testid="greeting" aria-label="greeting text">
+        hi
+      </Text>
+    );
+    expect(screen.getByTestId('greeting')).toHaveAttribute(
+      'aria-label',
+      'greeting text'
+    );
+  });
+
+  it('defaults to body variant when no variant is specified', () => {
+    render(<Text>default</Text>);
+    expect(screen.getByText('default').tagName).toBe('P');
+  });
+});