feat: new DropdownMenu component

Author: renrizzolo

src/components/Accordion/__snapshots__/index.spec.jsx.snap

@@ -19,12 +19,12 @@ exports[`<Accordion /> should have default props 1`] = `
         data-test-selector="panel-1"
         data-testid="panel-wrapper"
       >
-        <div
+        <button
           class="panel-component-header clearfix"
           data-testid="panel-header"
         >
           Panel 1
-        </div>
+        </button>
         <div
           class="panel-component-content-wrapper animate"
           style="height: 0px;"

src/components/Button/index.d.ts

@@ -6,11 +6,14 @@ export type ButtonVariant = 'solid' | 'borderless' | 'inverse' | 'link';
 
 export type ButtonSize = 'medium' | 'large';
 
+export type ButtonIconPosition = 'left' | 'right';
+
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean;
   color?: ButtonColor;
   variant?: ButtonVariant;
   size?: ButtonSize;
+  iconPosition?: ButtonIconPosition;
   /**
    * @deprecated
    * Please use the `color` prop instead.

src/components/Button/index.jsx

@@ -17,7 +17,7 @@ export const buttonSharedClasses = ({ size, inverse, variant, fullWidth, round,
   disabled: disabled,
 });
 
-const Button = (props) => {
+const Button = React.forwardRef((props, ref) => {
   const {
     color = 'default',
     size,
@@ -30,6 +30,7 @@ const Button = (props) => {
     disabled,
     dts,
     isLoading,
+    iconPosition = 'left',
     inverse, // deprecated
     theme, // deprecated
     ...rest
@@ -68,9 +69,12 @@ const Button = (props) => {
         <Spinner size={size === 'large' ? 'medium' : 'small'} />
       </div>
     ) : null;
-
+  const renderIcon = () => (
+    <span className={classNames('aui-icon-container', { 'is-loading': isLoading && !round })}>{icon}</span>
+  );
   return (
     <button
+      ref={ref}
       data-testid="button-wrapper"
       type="button"
       {...expandDts(dts)}
@@ -81,27 +85,28 @@ const Button = (props) => {
       {renderSpinner()}
       {
         <>
-          {icon && (
-            <span className={classNames('aui-icon-container', { 'is-loading': isLoading && !round })}>{icon}</span>
-          )}
+          {icon && iconPosition === 'left' && renderIcon()}
           {children && (
             <span className={classNames('aui-children-container', { 'is-loading': isLoading })}>{children}</span>
           )}
+          {icon && iconPosition === 'right' && renderIcon()}
         </>
       }
     </button>
   );
-};
+});
 
 export const colors = ['default', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'];
 export const variants = ['solid', 'borderless', 'inverse', 'link'];
 export const sizes = ['medium', 'large'];
+export const positions = ['left', 'right'];
 
 Button.propTypes = {
   isLoading: PropTypes.bool,
   color: PropTypes.oneOf(colors),
   variant: PropTypes.oneOf(variants),
   size: PropTypes.oneOf(sizes),
+  iconPosition: PropTypes.oneOf(positions),
   /**
    * @deprecated
    * Please use the `color` prop instead.
@@ -121,4 +126,6 @@ Button.propTypes = {
   children: PropTypes.node,
 };
 
+Button.displayName = 'Button';
+
 export default Button;

src/components/Button/styles.css

@@ -95,7 +95,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-primary-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-primary-active;
       border-color: $color-primary-active;
@@ -113,7 +114,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-secondary-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-secondary-active;
       border-color: $color-secondary-active;
@@ -131,7 +133,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-success-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-success-active;
       border-color: $color-success-active;
@@ -149,7 +152,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-info-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-info-active;
       border-color: $color-info-active;
@@ -167,7 +171,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-warning-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-warning-active;
       border-color: $color-warning-active;
@@ -185,7 +190,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-danger-strong;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-danger-active;
       border-color: $color-danger-active;
@@ -206,7 +212,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-grey-500;
     }
 
-    &:active {
+    &:active,
+    &.active {
       color: $color-text-inverse;
       background-color: $color-grey-400;
       border-color: $color-grey-500;
@@ -227,7 +234,8 @@ $color-secondary-active: $color-teal-700;
       border-color: $color-grey-500;
     }
 
-    &:active {
+    &:active,
+    &.active {
       background-color: $color-default-active;
       border-color: $color-grey-500;
     }

src/components/ButtonGroup/index.jsx

@@ -2,9 +2,12 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
+import DropdownMenu from '../DropdownMenu';
 import { expandDts } from '../../utils';
 import './styles.css';
 
+const buttonNames = [Button.displayName, DropdownMenu.Trigger.displayName];
+
 class ButtonGroup extends React.PureComponent {
   injectProps(children) {
     return React.Children.map(children, (child) => {
@@ -16,18 +19,18 @@ class ButtonGroup extends React.PureComponent {
           ...(this.props.size ? { size: this.props.size } : {}),
         };
 
-        const childNodes = React.Children.map(child.props.children, (childNode) =>
-          React.isValidElement(childNode)
+        const childNodes = React.Children.map(child.props.children, (childNode) => {
+          return React.isValidElement(childNode)
             ? React.cloneElement(childNode, {
                 ...childNode.props,
-                ...(childNode.type.name === Button.name ? buttonProps : {}),
+                ...(buttonNames.includes(childNode.type.displayName) ? buttonProps : {}),
               })
-            : childNode
-        );
+            : childNode;
+        });
 
         return React.cloneElement(child, {
           ...child.props,
-          ...(child.type.name === Button.name ? buttonProps : {}),
+          ...(buttonNames.includes(child.type.displayName) ? buttonProps : {}),
           ...(!_.isEmpty(childNodes) ? { children: childNodes.length === 1 ? childNodes[0] : childNodes } : {}),
         });
       }

src/components/ButtonGroup/index.spec.jsx

@@ -42,11 +42,12 @@ describe('<ButtonGroup />', () => {
     const { getByTestId } = render(
       <ButtonGroup disabled size="large">
         <div>
-          <div>foo</div>
+          <div data-testid="foo">foo</div>
           <Button color="primary">Test1</Button>
         </div>
       </ButtonGroup>
     );
+    expect(getByTestId('foo')).toBeEnabled();
     expect(getByTestId('button-wrapper')).toBeDisabled();
     expect(getByTestId('button-wrapper')).toHaveClass('aui-large');
   });

src/components/Checkbox/index.d.ts

@@ -1,37 +1,12 @@
 import * as React from 'react';
 
+export type CheckboxValue = string | number;
+
 export type CheckboxVariant = 'default' | 'box';
 
 export type CheckboxChecked = boolean | 'partial';
 
-export type CheckboxValue = string | number;
-
 export interface CheckboxProps {
-  /**
-   * name for the checkbox input
-   */
-  name?: string;
-  variant?: CheckboxVariant;
-  /**
-   * @function onChange called when checkBox onChange event is fired
-   * @param {string|boolean} nextState - the checked state
-   * @param {string} name - the checkbox name
-   * @param {string|number} value - the checkbox value
-   */
-  onChange?: (...args: any[]) => any;
-  onKeyDown?: (...args: any[]) => any;
-  /**
-   * checked status of the input checkBox: oneOf([true, false, 'partial']
-   */
-  checked?: CheckboxChecked;
-  /**
-   * @deprecated
-   */
-  size?: number;
-  /**
-   * @deprecated
-   */
-  inline?: boolean;
   /**
    * checkBox input value
    */
@@ -61,6 +36,31 @@ export interface CheckboxProps {
    * determines if the checkbox is disabled
    */
   disabled?: boolean;
+  /**
+   * name for the checkbox input
+   */
+  name?: string;
+  variant?: CheckboxVariant;
+  /**
+   * @function onChange called when checkBox onChange event is fired
+   * @param {string|boolean} nextState - the checked state
+   * @param {string} name - the checkbox name
+   * @param {string|number} value - the checkbox value
+   */
+  onChange?: (...args: any[]) => any;
+  onKeyDown?: (...args: any[]) => any;
+  /**
+   * checked status of the input checkBox: oneOf([true, false, 'partial']
+   */
+  checked?: CheckboxChecked;
+  /**
+   * @deprecated
+   */
+  size?: number;
+  /**
+   * @deprecated
+   */
+  inline?: boolean;
 }
 
 declare const Checkbox: React.FC<CheckboxProps>;

src/components/Checkbox/index.jsx

@@ -49,9 +49,9 @@ const Checkbox = ({
 
   return (
     <div
+      role="checkbox"
       {...rest}
       data-testid="checkbox"
-      role="checkbox"
       aria-disabled={disabled ? 'true' : undefined}
       aria-checked={checked === 'partial' ? 'mixed' : ariaChecked}
       className={classnames(
@@ -135,8 +135,7 @@ export const shareCheckboxPropTypes = {
   disabled: PropTypes.bool,
 };
 
-Checkbox.propTypes = {
-  ...shareCheckboxPropTypes,
+export const checkboxPropTypes = {
   /**
    * name for the checkbox input
    */
@@ -164,4 +163,9 @@ Checkbox.propTypes = {
   inline: PropTypes.bool,
 };
 
+Checkbox.propTypes = {
+  ...shareCheckboxPropTypes,
+  ...checkboxPropTypes,
+};
+
 export default Checkbox;

src/components/CheckboxGroup/index.d.ts

@@ -52,8 +52,8 @@ export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 export type CheckboxGroupVariant = 'default' | 'box';
 
 export interface CheckboxGroupProps {
-  value?: any[];
-  name?: string;
+  value: any[];
+  name: string;
   /**
    * @function onChange
    * @param {array} newValue - the new checkboxGroup value

src/components/CheckboxGroup/index.jsx

@@ -49,8 +49,7 @@ const CheckboxGroupAll = ({ className, label = 'All', values, ...rest }) => {
     />
   );
 };
-
-CheckboxGroupAll.propTypes = {
+export const checkboxGroupAllPropTypes = {
   label: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -59,6 +58,10 @@ CheckboxGroupAll.propTypes = {
   values: PropTypes.array.isRequired,
 };
 
+CheckboxGroupAll.propTypes = {
+  ...checkboxGroupAllPropTypes,
+};
+
 const CheckboxGroup = ({
   name,
   value,
@@ -98,9 +101,9 @@ const CheckboxGroup = ({
   );
 };
 
-CheckboxGroup.propTypes = {
-  value: PropTypes.array,
-  name: PropTypes.string,
+export const checkboxGroupPropTypes = {
+  value: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
   /**
    * @function onChange
    * @param {array} newValue - the new checkboxGroup value
@@ -131,5 +134,8 @@ CheckboxGroup.Item = CheckboxGroupItem;
 CheckboxGroup.All = CheckboxGroupAll;
 
 export { useCheckboxGroup } from './CheckboxGroupContext';
+CheckboxGroup.propTypes = {
+  ...checkboxGroupPropTypes,
+};
 
 export default CheckboxGroup;