Add `IconButton` component

src/sidebar/components/icon-button.js

+'use strict';
+
+const classnames = require('classnames');
+const propTypes = require('prop-types');
+const { createElement } = require('preact');
+
+const SvgIcon = require('./svg-icon');
+
+/**
+ * A simple icon-only button
+ */
+function IconButton({
+  className = '',
+  icon,
+  isActive = false,
+  title,
+  onClick = () => null,
+}) {
+  return (
+    <button
+      className={classnames('icon-button', className, {
+        'is-active': isActive,
+      })}
+      onClick={onClick}
+      aria-pressed={isActive}
+      title={title}
+    >
+      <SvgIcon name={icon} className="icon-button__icon" />
+    </button>
+  );
+}
+
+IconButton.propTypes = {
+  /** Optional additional class(es) to apply to the component element */
+  className: propTypes.string,
+  /** The name of the SVGIcon to render */
+  icon: propTypes.string.isRequired,
+  /** Is this button currently in an "active" or "on" state? */
+  isActive: propTypes.bool,
+  /** a value used for the `title` and `aria-label` attributes */
+  title: propTypes.string.isRequired,
+  /** optional callback for clicks */
+  onClick: propTypes.func,
+};
+
+module.exports = IconButton;

src/sidebar/components/test/icon-button-test.js

+'use strict';
+
+const { createElement } = require('preact');
+const { mount } = require('enzyme');
+
+const IconButton = require('../icon-button');
+const mockImportedComponents = require('./mock-imported-components');
+
+describe('IconButton', () => {
+  let fakeOnClick;
+
+  function createComponent(props = {}) {
+    return mount(
+      <IconButton
+        icon="fakeIcon"
+        isActive={false}
+        title="My Action"
+        onClick={fakeOnClick}
+        {...props}
+      />
+    );
+  }
+
+  beforeEach(() => {
+    fakeOnClick = sinon.stub();
+    IconButton.$imports.$mock(mockImportedComponents());
+  });
+
+  afterEach(() => {
+    IconButton.$imports.$restore();
+  });
+
+  it('adds active className if `isActive` is `true`', () => {
+    const wrapper = createComponent({ isActive: true });
+
+    assert.isTrue(wrapper.find('button').hasClass('is-active'));
+  });
+
+  it('renders `SvgIcon` for associated icon', () => {
+    const wrapper = createComponent();
+    assert.equal(wrapper.find('SvgIcon').prop('name'), 'fakeIcon');
+  });
+
+  it('sets ARIA `aria-pressed` attribute if `isActive`', () => {
+    const wrapper = createComponent({ isActive: true });
+    assert.isTrue(wrapper.find('button').prop('aria-pressed'));
+  });
+
+  it('invokes `onClick` callback when pressed', () => {
+    const wrapper = createComponent();
+    wrapper.find('button').simulate('click');
+    assert.calledOnce(fakeOnClick);
+  });
+
+  it('adds additional class name passed in `className` prop', () => {
+    const wrapper = createComponent({ className: 'my-class' });
+
+    assert.isTrue(wrapper.hasClass('my-class'));
+  });
+
+  it('sets compact style if `useCompactStyle` is set`', () => {
+    const wrapper = createComponent({ useCompactStyle: true });
+
+    assert.isTrue(wrapper.find('button').hasClass('icon-button--compact'));
+  });
+});

src/styles/sidebar/components/icon-button.scss

+@use "../../mixins/buttons";
+@use "../../variables" as var;
+
+.icon-button {
+  @include buttons.button-base;
+
+  &.is-active {
+    color: var.$brand;
+
+    &:hover {
+      color: var.$brand;
+    }
+  }
+}
+
+@media (pointer: coarse) {
+  .icon-button {
+    min-width: var.$touch-target-size;
+    min-height: var.$touch-target-size;
+  }
+}

src/styles/sidebar/sidebar.scss

@@ -43,6 +43,7 @@
 @use './components/group-list';
 @use './components/group-list-item';
 @use './components/help-panel';
+@use './components/icon-button';
 @use './components/logged-out-message';
 @use './components/markdown-editor';
 @use './components/markdown-view';