@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.0

package/components/date-picker/month-names.js

@@ -18,7 +18,7 @@ class MonthName extends PureComponent {
     render() {
         const { month, locale } = this.props;
         return (<button type="button" className={classNames(styles.monthName, {
-                [styles.today]: isThisMonth(month)
+                [styles.today]: isThisMonth(month),
             })} onClick={this.handleClick}>
         {format(month, 'LLL', { locale })}
       </button>);
@@ -35,16 +35,14 @@ export default function MonthNames(props) {
     let top = 0;
     let bottom = 0;
     if (props.currentRange) {
-        [top, bottom] = props.currentRange.
-            map(date => Math.floor(pxToDate.x(Number(date))));
+        [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(Number(date))));
     }
     return (<div className={styles.monthNames}>
       {months.map(month => (<MonthName key={+month} month={month} onScrollChange={props.onScrollChange} locale={locale}/>))}
-      {props.currentRange &&
-            (<div className={styles.range} style={{
-                    top: top - 1,
-                    height: (bottom + 1) - (top - 1)
-                }}/>)}
+      {props.currentRange && (<div className={styles.range} style={{
+                top: top - 1,
+                height: bottom + 1 - (top - 1),
+            }}/>)}
       <MonthSlider {...props} pxToDate={pxToDate}/>
     </div>);
 }

package/components/date-picker/month-slider.js

@@ -9,7 +9,7 @@ import styles from './date-picker.css';
 const COVERYEARS = 3;
 export default class MonthSlider extends PureComponent {
     state = {
-        dragging: false
+        dragging: false,
     };
     componentDidUpdate(prevProps, prevState) {
         if (this.state.dragging && !prevState.dragging) {
@@ -40,7 +40,7 @@ export default class MonthSlider extends PureComponent {
         const classes = classNames(styles.monthSlider, { [styles.dragging]: this.state.dragging });
         return (<div>
         {years.map(date => (<button type="button" key={+date} className={classes} style={{
-                    top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize)
+                    top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize),
                 }} onMouseDown={this.onMouseDown}/>))}
       </div>);
     }

package/components/date-picker/month.js

@@ -21,9 +21,7 @@ export default function Month(props) {
         day = addDays(day, 1);
     }
     return (<div className={styles.month}>
-      <span className={styles.monthTitle}>
-        {format(props.month, 'LLLL', { locale })}
-      </span>
+      <span className={styles.monthTitle}>{format(props.month, 'LLLL', { locale })}</span>
       {days.map(date => (<Day {...props} day={date} empty={date < start} key={+date}/>))}
     </div>);
 }

package/components/date-picker/months.js

@@ -61,10 +61,7 @@ export default function Months(props) {
                 date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
             }
             else if (dy > bottomOffset) {
-                date =
-                    pxToDate.y(bottomOffset) +
-                        (dy - bottomOffset) *
-                            scrollSpeed(months[MONTHSBACK + 1]);
+                date = pxToDate.y(bottomOffset) + (dy - bottomOffset) * scrollSpeed(months[MONTHSBACK + 1]);
             }
             else {
                 date = pxToDate.y(dy);
@@ -86,8 +83,7 @@ export default function Months(props) {
     }, [handleWheel]);
     return (<div className={styles.months} ref={componentRef}>
       <div style={{
-            top: Math.
-                floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
+            top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
         }} className={styles.days}>
         {months.map(date => (<Month {...props} month={date} key={+date}/>))}
       </div>

package/components/date-picker/weekdays.js

@@ -6,12 +6,11 @@ import { startOfDay } from 'date-fns/startOfDay';
 import { getWeekStartsOn, shiftWeekArray, weekdays } from './consts';
 import styles from './date-picker.css';
 export default function Weekdays(props) {
-    const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).
-        map(value => startOfDay(setDay(new Date(), value)));
+    const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).map(value => startOfDay(setDay(new Date(), value)));
     const { locale } = props;
     return (<div className={styles.weekdays}>
       {days.map(day => (<span className={classNames(styles.weekday, {
-                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
+                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
             })} key={+day}>
           {format(day, 'EEEEEE', { locale })}
         </span>))}

package/components/date-picker/years.js

@@ -46,7 +46,7 @@ export default class Years extends PureComponent {
         e.preventDefault();
         const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
         this.setState({
-            scrollDate: newScrollDate
+            scrollDate: newScrollDate,
         });
         if (scrollTO) {
             window.clearTimeout(scrollTO);
@@ -66,11 +66,11 @@ export default class Years extends PureComponent {
         const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
         return (<div className={styles.years} ref={this.componentRef} style={{
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
-                top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
+                top: Math.floor(calHeight * HALF - pxToDate.x(Number(date))),
             }}>
         {years.map(item => (<button type="button" key={+item} className={classNames(styles.year, {
                     [styles.currentYear]: isSameYear(item, date),
-                    [styles.today]: isThisYear(item)
+                    [styles.today]: isThisYear(item),
                 })} onClick={function handleClick() {
                     onScrollChange(Number(setYear(scrollDate, getYear(item))));
                 }}>

package/components/dialog/dialog.d.ts

@@ -20,6 +20,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     dense?: boolean | null | undefined;
     native?: boolean;
     modal?: boolean;
+    preventBodyScroll?: boolean;
 }
 export default class Dialog extends PureComponent<DialogProps> {
     static defaultProps: Partial<DialogProps>;

package/components/dialog/dialog.js

@@ -28,10 +28,11 @@ export default class Dialog extends PureComponent {
         shortcutOptions: { modal: false },
         trapFocus: false,
         autoFocusFirst: true,
-        modal: true
+        modal: true,
+        preventBodyScroll: true,
     };
     state = {
-        shortcutsScope: getUID('ring-dialog-')
+        shortcutsScope: getUID('ring-dialog-'),
     };
     componentDidMount() {
         const { show, native } = this.props;
@@ -72,6 +73,9 @@ export default class Dialog extends PureComponent {
         }
     }
     toggleScrollPreventer() {
+        if (!this.props.preventBodyScroll) {
+            return;
+        }
         if (this.props.show) {
             this.scrollPreventer.prevent();
         }
@@ -95,7 +99,7 @@ export default class Dialog extends PureComponent {
             }
         };
         return {
-            esc: onEscape
+            esc: onEscape,
         };
     };
     dialog;
@@ -104,7 +108,7 @@ export default class Dialog extends PureComponent {
     };
     nativeDialog = createRef();
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         const content = (<>
@@ -115,26 +119,29 @@ export default class Dialog extends PureComponent {
         <div className={styles.innerContainer}>
           <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
             {children}
-            {showCloseButton &&
-                (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
-                        [styles.closeButtonOutside]: !closeButtonInside,
-                        [styles.closeButtonInside]: closeButtonInside
-                    })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+            {showCloseButton && (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
+                    [styles.closeButtonOutside]: !closeButtonInside,
+                    [styles.closeButtonInside]: closeButtonInside,
+                })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
           </AdaptiveIsland>
         </div>
       </>);
         if (native) {
             return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog}>
           <PopupTarget id={this.uid} className={styles.popupTarget}>
-            {target => <>{content}{target}</>}
+            {target => (<>
+                {content}
+                {target}
+              </>)}
           </PopupTarget>
         </dialog>);
         }
-        return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
-        {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
+        return (show &&
+            createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+          {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
               {content}
               {target}
             </TabTrap>)}
-      </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body);
+        </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body));
     }
 }

package/components/dialog/dialog__body-scroll-preventer.js

@@ -37,7 +37,7 @@ export const preventerFactory = (key) => {
     const preventerKey = key || Math.random();
     return {
         prevent: () => prevent(preventerKey),
-        reset: () => reset(preventerKey)
+        reset: () => reset(preventerKey),
     };
 };
 export default preventerFactory('default-preventer');

package/components/dropdown/dropdown.css

@@ -5,10 +5,8 @@
 }
 
 .anchor.anchor {
-  margin: 0 -3px;
-  padding: 0 3px;
-
-  font: inherit;
+  margin-inline: -3px;
+  padding-inline: 3px;
 }
 
 .chevron {

package/components/dropdown/dropdown.d.ts

@@ -26,8 +26,8 @@ export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'childr
     hoverMode: boolean;
     hoverShowTimeOut: number;
     hoverHideTimeOut: number;
-    onShow: (() => void);
-    onHide: (() => void);
+    onShow: () => void;
+    onHide: () => void;
     activeClassName?: string | null | undefined;
     'data-test'?: string | null | undefined;
 }

package/components/dropdown/dropdown.js

@@ -19,11 +19,11 @@ export default class Dropdown extends Component {
         onShow: () => { },
         onHide: () => { },
         onMouseEnter: () => { },
-        onMouseLeave: () => { }
+        onMouseLeave: () => { },
     };
     state = {
         show: this.props.initShown,
-        pinned: false
+        pinned: false,
     };
     onClick = () => {
         if (this.props.disabled) {
@@ -99,13 +99,13 @@ export default class Dropdown extends Component {
         const { show, pinned } = this.state;
         const { initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut, children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest, disabled, ...restProps } = this.props;
         const classes = classNames(styles.dropdown, className, {
-            [activeClassName ?? '']: activeClassName != null && show
+            [activeClassName ?? '']: activeClassName != null && show,
         });
         let anchorElement;
         const active = hoverMode ? pinned : show;
         switch (typeof anchor) {
             case 'string':
-                anchorElement = (<Anchor active={active}>{anchor}</Anchor>);
+                anchorElement = <Anchor active={active}>{anchor}</Anchor>;
                 break;
             case 'function':
                 anchorElement = anchor({ active: show, pinned });
@@ -123,7 +123,7 @@ export default class Dropdown extends Component {
             onCloseAttempt: this.onChildCloseAttempt,
             onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
             onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
-            dontCloseOnAnchorClick: true
+            dontCloseOnAnchorClick: true,
         };
         return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
         // anchorElement should be a `button` or an `a`

package/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, cloneElement } from 'react';
+import { forwardRef, useMemo, cloneElement, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -10,20 +10,20 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     const anchorAriaProps = useMemo(() => ({
         ...(listId ? { 'aria-haspopup': true } : {}),
         ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
-        ...(active ? { 'aria-expanded': true } : {})
+        ...(active ? { 'aria-expanded': true } : {}),
     }), [active, activeListItemId, listId]);
     const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
     const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
     if (typeof anchor === 'string') {
-        return (<Anchor {...anchorComponentProps}>{anchor}</Anchor>);
+        return <Anchor {...anchorComponentProps}>{anchor}</Anchor>;
     }
     if (typeof anchor === 'function') {
-        return anchor(({ active, pinned, ...restProps }), anchorAriaProps);
+        return anchor({ active, pinned, ...restProps }, anchorAriaProps);
     }
     if (!isArray(anchor)) {
         return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
     }
-    return (<div {...anchorAriaProps}>{anchor}</div>);
+    return <div {...anchorAriaProps}>{anchor}</div>;
 }
 const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps }, forwardedRef) {
     const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);

package/components/editable-heading/editable-heading.css

@@ -146,10 +146,13 @@
   content: "";
   pointer-events: none;
 
-  background: linear-gradient(to bottom, rgba(var(--ring-content-background-components), 0), rgba(var(--ring-content-background-components), 1));
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--ring-content-background-components), 0),
+    rgba(var(--ring-content-background-components), 1)
+  );
 }
 
-
 .textareaWrapper {
   position: relative;
 

package/components/editable-heading/editable-heading.js

@@ -14,7 +14,7 @@ function noop() { }
 export const EditableHeading = (props) => {
     const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputRows, translations = {
         save: 'Save',
-        cancel: 'Cancel'
+        cancel: 'Cancel',
     }, ...restProps } = props;
     const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
     const [isInFocus, setIsInFocus] = React.useState(false);
@@ -43,7 +43,7 @@ export const EditableHeading = (props) => {
         [styles.error]: hasError,
         [styles.disabled]: disabled,
         [styles.multiline]: multiline,
-        [styles.selectionMode]: isInSelectionMode
+        [styles.selectionMode]: isInSelectionMode,
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
@@ -112,31 +112,33 @@ export const EditableHeading = (props) => {
     }, [onMouseMove, onMouseUp]);
     return (<>
       <div className={classes}>
-        {!disabled && isEditing
-            ? (<>
-              <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
+        {!disabled && isEditing ? (<>
+            <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              {!multiline
-                    ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>)
-                    : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
-                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
-                    {!isScrolledToBottom && <div className={styles.textareaFade}/>}
-                  </div>)}
-            </>)
-            : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
-              <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>
-            </button>)}
+            {!multiline ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>) : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
+                <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
+                {!isScrolledToBottom && <div className={styles.textareaFade}/>}
+              </div>)}
+          </>) : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
+            <Heading className={headingClasses} level={level} data-test={dataTest}>
+              {children}
+            </Heading>
+          </button>)}
 
-        {!isEditing && (renderMenu())}
+        {!isEditing && renderMenu()}
 
         {isEditing && !embedded && (<>
-            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>{translations.save}</Button>
+            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>
+              {translations.save}
+            </Button>
 
-            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>{translations.cancel}</Button>
+            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>
+              {translations.cancel}
+            </Button>
           </>)}
       </div>
 
-      {isEditing && error && (<div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>)}
+      {isEditing && error && <div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>}
     </>);
 };
 export default React.memo(EditableHeading);

package/components/error-bubble/error-bubble.js

@@ -10,7 +10,7 @@ export default class ErrorBubble extends PureComponent {
     render() {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
-        return (<div className={styles.errorBubbleWrapper}>
+        return (<div className={styles.errorBubbleWrapper} data-test="ring-error-bubble-wrapper">
         {Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps }))}
         {restProps.error && (<Popup trapFocus={false} className={styles.errorBubblePopup} hidden={false} attached={false} directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}>
             <div className={errorBubbleClasses} data-test="ring-error-bubble">

package/components/error-message/error-message.js

@@ -12,14 +12,12 @@ export default class ErrorMessage extends Component {
         const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
         const classes = classNames(styles.errorMessage, className);
         return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
-        {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
+        {icon && <Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>}
         <div className={styles.content}>
           <div className={styles.title} data-test="ring-error-message-title">
             {code && `${code}:`} {message}
           </div>
-          {description && (<div className={styles.description}>
-              {description}
-            </div>)}
+          {description && <div className={styles.description}>{description}</div>}
           {children}
         </div>
       </div>);

package/components/footer/footer.js

@@ -9,12 +9,10 @@ const FooterColumn = memo(function FooterColumn({ position, children }) {
     const classes = classNames({
         [styles.columnLeft]: position === 'left',
         [styles.columnCenter]: position === 'center',
-        [styles.columnRight]: position === 'right'
+        [styles.columnRight]: position === 'right',
     });
     return (<div className={classes}>
-      <ul className={styles.columnItem}>
-        {children}
-      </ul>
+      <ul className={styles.columnItem}>{children}</ul>
     </div>);
 });
 /**
@@ -23,7 +21,7 @@ const FooterColumn = memo(function FooterColumn({ position, children }) {
  * @returns {string}
  */
 export function copyright(year) {
-    const currentYear = (new Date()).getUTCFullYear();
+    const currentYear = new Date().getUTCFullYear();
     const ndash = '–';
     let ret = 'Copyright © ';
     if (year >= currentYear) {
@@ -47,13 +45,13 @@ const FooterLine = memo(function FooterLine(props) {
         }
         const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
         if (item.url) {
-            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>{element}</Link>);
+            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>
+          {element}
+        </Link>);
         }
         return element;
     }
-    return (<li className={styles.line}>
-      {items.map(renderItem)}
-    </li>);
+    return <li className={styles.line}>{items.map(renderItem)}</li>;
 });
 const Footer = memo(function Footer({ floating, className, left, center, right }) {
     function content(elements, position) {
@@ -67,12 +65,10 @@ const Footer = memo(function Footer({ floating, className, left, center, right }
       </FooterColumn>);
     }
     const classes = classNames(styles.footer, className, {
-        [styles.footerFloating]: floating
+        [styles.footerFloating]: floating,
     });
-    return (<footer className={classes} data-test="ring-footer">{[
-            content(left, 'left'),
-            content(center, 'center'),
-            content(right, 'right')
-        ]}</footer>);
+    return (<footer className={classes} data-test="ring-footer">
+      {[content(left, 'left'), content(center, 'center'), content(right, 'right')]}
+    </footer>);
 });
 export default Footer;