Add new OptionButton component

src/components/input/OptionButton.tsx

@@ -0,0 +1,76 @@
+import classnames from 'classnames';
+import type { ComponentChildren } from 'preact';
+
+import { CheckIcon } from '../icons/';
+import Button from './Button';
+import type { ButtonProps } from './Button';
+
+export type OptionButtonProps = {
+  /** Optional content to render at the right side of the button */
+  details?: ComponentChildren;
+  /** alias for `pressed`: this option button is selected **/
+  selected?: boolean;
+} & Omit<ButtonProps, 'size' | 'unstyled' | 'classes' | 'variant'>;
+
+/**
+ * Render a button representing one of a set of options, with optional
+ * right-aligned `details` content
+ */
+const OptionButton = function OptionButton({
+  children,
+  details,
+  selected = false,
+
+  pressed,
+  ...buttonProps
+}: OptionButtonProps) {
+  const isPressed = selected || pressed;
+  return (
+    <Button
+      classes={classnames(
+        'group', // Facilitate styling children based on this element's state
+        'w-full gap-x-2 px-2 py-1',
+        'border border-stone-300 bg-stone-50',
+        'enabled:hover:border-slate-5 enabled:hover:bg-slate-0',
+        'disabled:border-stone-200',
+        'aria-pressed:border-slate-5 aria-pressed:bg-slate-0 aria-pressed:shadow-inner',
+        'aria-expanded:border-slate-5 aria-expanded:bg-slate-0 aria-expanded:shadow-inner'
+      )}
+      size="custom"
+      variant="custom"
+      pressed={isPressed}
+      {...buttonProps}
+    >
+      <div className="grow flex items-center gap-x-1 text-start">
+        {isPressed && (
+          <div className="rounded-full bg-slate-600 p-0.5">
+            <CheckIcon className="w-[0.6em] h-[0.6em] text-white" />
+          </div>
+        )}
+        <div
+          className="text-slate-600 font-semibold group-disabled:text-stone-400"
+          data-testid="option-button-label"
+        >
+          {children}
+        </div>
+      </div>
+      <div className="text-end">
+        {details && (
+          <span
+            className={classnames(
+              'uppercase text-[0.8em] text-stone-500',
+              'group-enabled:group-hover:text-stone-600',
+              'group-disabled:text-stone-400',
+              'group-aria-pressed:text-slate-600 group-aria-expanded:text-slate-600'
+            )}
+            data-testid="option-button-details"
+          >
+            {details}
+          </span>
+        )}
+      </div>
+    </Button>
+  );
+};
+
+export default OptionButton;

src/components/input/index.ts

@@ -4,6 +4,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
 export { default as InputGroup } from './InputGroup';
+export { default as OptionButton } from './OptionButton';
 export { default as Select } from './Select';
 
 export type { ButtonProps } from './Button';
@@ -12,4 +13,5 @@ export type { CheckboxProps } from './Checkbox';
 export type { IconButtonProps } from './IconButton';
 export type { InputProps } from './Input';
 export type { InputGroupProps } from './InputGroup';
+export type { OptionButtonProps } from './OptionButton';
 export type { SelectProps } from './Select';

src/components/input/test/OptionButton-test.js

@@ -0,0 +1,42 @@
+import { mount } from 'enzyme';
+
+import { testSimpleComponent } from '../../test/common-tests';
+import OptionButton from '../OptionButton';
+
+describe('OptionButton', () => {
+  const createComponent = (props = {}) => {
+    return mount(
+      <OptionButton {...props}>This is content inside of a Button</OptionButton>
+    );
+  };
+
+  testSimpleComponent(OptionButton);
+
+  it('applies appropriate ARIA attributes for button state', () => {
+    const pressed = createComponent({ pressed: true });
+    const selected = createComponent({ selected: true });
+
+    assert.equal(
+      pressed.find('button').getDOMNode().getAttribute('aria-pressed'),
+      'true'
+    );
+    assert.equal(
+      selected.find('button').getDOMNode().getAttribute('aria-pressed'),
+      'true'
+    );
+  });
+
+  it('renders optional details content', () => {
+    const noDetails = createComponent();
+    const withDetails = createComponent({ details: 'PDF' });
+
+    function getDetails(wrapper) {
+      return wrapper.find('[data-testid="option-button-details"]');
+    }
+
+    assert.isNotOk(getDetails(noDetails).exists());
+    const details = getDetails(withDetails);
+    assert.isOk(details);
+    assert.equal(details.text(), 'PDF');
+  });
+});

src/index.ts

@@ -36,6 +36,7 @@ export {
   IconButton,
   Input,
   InputGroup,
+  OptionButton,
   Select,
 } from './components/input';
 export {
@@ -97,6 +98,7 @@ export type {
   IconButtonProps,
   InputProps,
   InputGroupProps,
+  OptionButtonProps,
   SelectProps,
 } from './components/input';
 

src/pattern-library/components/patterns/input/OptionButtonPage.tsx

@@ -0,0 +1,145 @@
+import { OptionButton } from '../../../../';
+import Library from '../../Library';
+
+export default function OptionButtonPage() {
+  return (
+    <Library.Page
+      title="OptionButton"
+      intro={
+        <p>
+          <code>OptionButton</code> is a simple component for presenting an
+          option as part of a set of options. It can be used in places where it
+          is impractical or undesirable to use an equivalent{' '}
+          <code>{`input type="radio"`}</code> or <code>select</code> element.{' '}
+          <code>OptionButton</code> wraps{' '}
+          <Library.Link href="/input-button">
+            <code>Button</code>
+          </Library.Link>
+          .
+        </p>
+      }
+    >
+      <Library.Section>
+        <Library.Pattern>
+          <Library.Usage componentName="OptionButton" />
+          <Library.Example>
+            <Library.Demo withSource title="Basic OptionButton">
+              <div className="w-[250px]">
+                <OptionButton>Option Alpha</OptionButton>
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="Working with OptionButton">
+          <Library.Example title="Multiple OptionButtons">
+            <p>
+              <code>OptionButton</code> is designed for use in a set, similar to
+              an <code>option</code> element or a radio button. While not
+              enforced, a maximum of one <code>OptionButton</code> in a set
+              should be selected. There is also <code>disabled</code>
+              styling.
+            </p>
+            <p>
+              To facilitate alignment, <code>OptionButton</code> stretches to
+              the full width of its container.
+            </p>
+            <Library.Demo withSource>
+              <div className="w-[280px] space-y-2">
+                <OptionButton>Option Alpha</OptionButton>
+                <OptionButton selected>Option Bravo</OptionButton>
+                <OptionButton>Option Charlie-Delta-Echo</OptionButton>
+                <OptionButton disabled>Option Foxtrot</OptionButton>
+                <OptionButton>Option Golf</OptionButton>
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="Component API">
+          <Library.Example title="details">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Optional content to display at right side of button. Be sure to
+                set a useful <code>title</code> (used for generating{' '}
+                <code>aria-label</code>) when constructing such buttons.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>preact.ComponentChildren</code>
+              </Library.InfoItem>
+            </Library.Info>
+
+            <Library.Demo title="OptionButton with details" withSource>
+              <div className="w-[250px]">
+                <OptionButton
+                  details="PDF"
+                  title="Select a PDF from Google Drive"
+                >
+                  Google Drive
+                </OptionButton>
+              </div>
+            </Library.Demo>
+          </Library.Example>
+
+          <Library.Example title="selected">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                The option represented by the button is selected. A maximum of
+                one <code>OptionButton</code> in a set should be selected at any
+                time. This is an alias for the <code>Button</code>{' '}
+                <code>pressed</code> prop.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>boolean</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>false</code>
+              </Library.InfoItem>
+            </Library.Info>
+
+            <Library.Demo title="Selected OptionButton" withSource>
+              <div className="w-[250px]">
+                <OptionButton
+                  details="PDF"
+                  title="Select a PDF from Google Drive"
+                  selected
+                >
+                  Google Drive
+                </OptionButton>
+              </div>
+            </Library.Demo>
+          </Library.Example>
+
+          <Library.Example title="...buttonProps">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                <code>OptionButton</code> accepts and forwards all{' '}
+                <Library.Link href="/input-button">
+                  <code>Button</code>
+                </Library.Link>{' '}
+                component API props. Styling API props are not forwarded.
+              </Library.InfoItem>
+              <Library.InfoItem label="props">
+                All <code>Button</code> props except styling API props:
+                <ul>
+                  <li>
+                    <code>classes</code>
+                  </li>
+                  <li>
+                    <code>unstyled</code>
+                  </li>
+                  <li>
+                    <code>variant</code>
+                  </li>
+                  <li>
+                    <code>size</code>
+                  </li>
+                </ul>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+        </Library.Pattern>
+      </Library.Section>
+    </Library.Page>
+  );
+}