Add `size` property, more `variant` options to `*Button` components

src/shared/components/buttons.js

@@ -15,9 +15,11 @@ import { SvgIcon } from '@hypothesis/frontend-shared';
  * @prop {boolean} [pressed] - Is this button currently "active?" (set
  *   `aria-pressed`)
  * @prop {() => any} [onClick]
+ * @prop {'small'|'medium'|'large'} [size='medium'] - Relative button size:
+ *   affects padding
  * @prop {Object} [style] - Optional inline styles
  * @prop {string} [title] - Button title; used for `aria-label` attribute
- * @prop {'primary'} [variant] - For styling: element variant
+ * @prop {'normal'|'primary'|'light'|'dark'} [variant='normal'] - For styling: element variant
  */
 
 /**
@@ -42,9 +44,10 @@ function ButtonBase({
   expanded,
   pressed,
   onClick = () => {},
+  size = 'medium',
   style = {},
   title,
-  variant,
+  variant = 'normal',
 }) {
   const otherAttributes = {};
   if (typeof disabled === 'boolean') {
@@ -64,10 +67,14 @@ function ButtonBase({
 
   return (
     <button
-      className={classnames(className, {
-        [`${className}--${variant}`]: variant,
+      className={classnames(
+        className,
+        `${className}--${size}`,
+        `${className}--${variant}`,
+        {
           [`${className}--icon-${iconPosition}`]: icon,
-      })}
+        }
+      )}
       onClick={onClick}
       {...otherAttributes}
       style={style}

src/shared/components/test/buttons-test.js

@@ -41,11 +41,39 @@ function addCommonTests({ componentName, createComponentFn, withIcon = true }) {
       assert.isTrue(wrapper.find('button').hasClass(componentName));
     });
 
-    it('renders a primary variant', () => {
-      const wrapper = createComponentFn({ variant: 'primary' });
+    ['primary', 'light', 'dark'].forEach(variant => {
+      it('renders a valid variant', () => {
+        const wrapper = createComponentFn({ variant });
 
         assert.isTrue(
-        wrapper.find('button').hasClass(`${componentName}--primary`)
+          wrapper.find('button').hasClass(`${componentName}--${variant}`)
+        );
+      });
+    });
+
+    it('sets a `normal` variant modifier class by default', () => {
+      const wrapper = createComponentFn();
+
+      assert.isTrue(
+        wrapper.find('button').hasClass(`${componentName}--normal`)
+      );
+    });
+
+    ['small', 'medium', 'large'].forEach(size => {
+      it('renders a valid size', () => {
+        const wrapper = createComponentFn({ size });
+
+        assert.isTrue(
+          wrapper.find('button').hasClass(`${componentName}--${size}`)
+        );
+      });
+    });
+
+    it('sets a `medium` size modifier class by default', () => {
+      const wrapper = createComponentFn();
+
+      assert.isTrue(
+        wrapper.find('button').hasClass(`${componentName}--medium`)
       );
     });