box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/components/date-picker/__tests__/DatePicker.test.tsx

@@ -128,7 +128,7 @@ describe('components/date-picker/DatePicker', () => {
         const wrapper = mount(<DatePicker name="dateinput" label="Date" placeholder="a date" value={new Date()} />);
 
         expect(wrapper.find('PlainButton.date-picker-clear-btn').length).toEqual(1);
-        expect(wrapper.find('IconClear').length).toEqual(1);
+        expect(wrapper.find('ClearBadge16').length).toEqual(1);
     });
 
     test('should clear datepicker and call onChange() prop when clear button is clicked', () => {
@@ -155,7 +155,49 @@ describe('components/date-picker/DatePicker', () => {
             <DatePicker name="dateinput" isClearable={false} label="Date" placeholder="a date" value={new Date()} />,
         );
 
-        expect(wrapper.find('IconClear').length).toEqual(0);
+        expect(wrapper.find('.date-picker-clear-btn').length).toEqual(0);
+        expect(wrapper.find('ClearBadge16').length).toEqual(0);
+    });
+
+    test.each`
+        maxDate                            | minDate                            | maxAttr         | minAttr
+        ${new Date('2022-12-31T00:00:00')} | ${new Date('2022-01-01T00:00:00')} | ${'2022-12-31'} | ${'2022-01-01'}
+        ${null}                            | ${null}                            | ${'9999-12-31'} | ${'0001-01-01'}
+    `(
+        'should pass { max: $maxAttr, min: $minAttr } attributes to date picker input',
+        ({ maxDate, minDate, maxAttr, minAttr }) => {
+            const wrapper = getWrapper({
+                isAccessible: true,
+                maxDate,
+                minDate,
+            });
+
+            const dateInput = wrapper.find('.date-picker-input');
+            expect(dateInput.prop('max')).toEqual(maxAttr);
+            expect(dateInput.prop('min')).toEqual(minAttr);
+        },
+    );
+
+    test('should show alert icon when date value is after maximum date', () => {
+        const wrapper = getWrapper({
+            isAccessible: true,
+            maxDate: new Date('2021-12-31T00:00:00'),
+        });
+
+        expect(wrapper.find('Alert16').length).toEqual(0);
+        wrapper.find('.date-picker-input').simulate('change', { target: { value: '2022-01-01' } });
+        expect(wrapper.find('Alert16').length).toEqual(1);
+    });
+
+    test('should show alert icon when date value is before minimum date', () => {
+        const wrapper = getWrapper({
+            isAccessible: true,
+            minDate: new Date('2022-01-01T00:00:00'),
+        });
+
+        expect(wrapper.find('Alert16').length).toEqual(0);
+        wrapper.find('.date-picker-input').simulate('change', { target: { value: '2021-12-31' } });
+        expect(wrapper.find('Alert16').length).toEqual(1);
     });
 
     test('should show tooltip when error exists', () => {

package/src/components/date-picker/_pikaday.scss

@@ -8,7 +8,6 @@
     @include common-typography;
     @include box-sizing;
 
-    position: relative;
     z-index: 9999;
     display: block;
     color: $bdl-gray-80;
@@ -23,8 +22,15 @@
 
     &.is-bound {
         position: absolute;
-        margin-top: 5px;
         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
+
+        &.bottom-aligned {
+            margin-top: 5px;
+        }
+
+        &.top-aligned {
+            margin-top: -5px;
+        }
     }
 }
 

package/src/components/flyout/Flyout.js

@@ -1,9 +1,12 @@
 // @flow
 import * as React from 'react';
+import classNames from 'classnames';
 import TetherComponent from 'react-tether';
 import uniqueId from 'lodash/uniqueId';
 import { KEYS } from '../../constants';
 
+import FlyoutContext from './FlyoutContext';
+
 import './Flyout.scss';
 
 const BOTTOM_CENTER = 'bottom-center';
@@ -116,6 +119,10 @@ export type FlyoutProps = {
      * Sets tether constrain to window
      */
     constrainToWindow?: boolean,
+    /**
+     * Toggles responsive behavior
+     */
+    isResponsive?: boolean,
     /**
      * Whether overlay should be visible by default
      */
@@ -175,6 +182,7 @@ class Flyout extends React.Component<Props, State> {
         closeOnWindowBlur: false,
         constrainToScrollParent: true,
         constrainToWindow: false,
+        isResponsive: false,
         isVisibleByDefault: false,
         openOnHover: false,
         openOnHoverDelayTimeout: 300,
@@ -365,6 +373,7 @@ class Flyout extends React.Component<Props, State> {
             className = '',
             constrainToScrollParent,
             constrainToWindow,
+            isResponsive,
             offset,
             openOnHover,
             position,
@@ -389,7 +398,7 @@ class Flyout extends React.Component<Props, State> {
             onMouseEnter: this.handleButtonHover,
             onMouseLeave: this.handleButtonHoverLeave,
             role: 'button',
-            tabindex: '0',
+            tabIndex: '0',
             'aria-haspopup': 'true',
             'aria-expanded': isVisible ? 'true' : 'false',
         };
@@ -432,7 +441,7 @@ class Flyout extends React.Component<Props, State> {
             targetAttachment: tetherPosition.targetAttachment,
             enabled: isVisible,
             classes: {
-                element: `flyout-overlay ${className}`,
+                element: classNames('flyout-overlay', { 'bdl-Flyout--responsive': isResponsive }, className),
             },
             constraints,
         };
@@ -465,7 +474,9 @@ class Flyout extends React.Component<Props, State> {
         return (
             <TetherComponent {...tetherProps}>
                 {React.cloneElement(overlayButton, overlayButtonProps)}
-                {isVisible ? React.cloneElement(overlayContent, overlayProps) : null}
+                <FlyoutContext.Provider value={{ closeOverlay: this.closeOverlay }}>
+                    {isVisible ? React.cloneElement(overlayContent, overlayProps) : null}
+                </FlyoutContext.Provider>
             </TetherComponent>
         );
     }

package/src/components/flyout/Flyout.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import './variables';
 
 .flyout-overlay {
     @include common-typography;
@@ -23,3 +24,42 @@
         }
     }
 }
+
+@include breakpoint($medium-screen) {
+    .flyout-overlay.bdl-Flyout--responsive {
+        &.flyout-overlay-enabled {
+            // cancels out the tether inline styling without having to set enabled=false
+            transform: none !important;
+        }
+
+        .overlay {
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: 0;
+            padding: 0;
+            background-color: $white;
+            border: none;
+            border-radius: 0;
+            box-shadow: none;
+        }
+
+        .bdl-OverlayHeader {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: $bdl-OverlayHeader-height;
+            padding: ($bdl-grid-unit * 3) ($bdl-grid-unit * 4);
+            background-color: $white;
+            box-shadow: $bdl-header-box-shadow;
+
+            .bdl-CloseButton {
+                display: block;
+            }
+        }
+    }
+}

package/src/components/flyout/FlyoutContext.js

@@ -0,0 +1,9 @@
+// @flow
+import * as React from 'react';
+import noop from 'lodash/noop';
+
+type FlyoutContextValues = {
+    closeOverlay: Function,
+};
+
+export default React.createContext<FlyoutContextValues>({ closeOverlay: noop });

package/src/components/flyout/OverlayHeader.scss

@@ -0,0 +1,9 @@
+.bdl-OverlayHeader {
+    .bdl-CloseButton {
+        display: none;
+    }
+}
+
+.bdl-OverlayHeader-content {
+    flex-grow: 1;
+}

package/src/components/flyout/OverlayHeader.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import classNames from 'classnames';
+import CloseButton from '../close-button/CloseButton';
+// @ts-ignore flow
+import FlyoutContext from './FlyoutContext';
+
+import './OverlayHeader.scss';
+
+export interface OverlayHeaderProps {
+    /** Components to render in the header */
+    children?: React.ReactNode;
+    /** Set className to the overlay header */
+    className?: string;
+}
+
+const OverlayHeader = ({ children, className }: OverlayHeaderProps) => {
+    const handleClick = (event: React.SyntheticEvent<HTMLDivElement>): void => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const { closeOverlay } = React.useContext(FlyoutContext);
+
+    return (
+        <div
+            className={classNames('bdl-OverlayHeader', className)}
+            data-testid="bdl-OverlayHeader"
+            onClick={handleClick}
+            role="presentation"
+        >
+            <div className="bdl-OverlayHeader-content">{children}</div>
+            <CloseButton onClick={closeOverlay} />
+        </div>
+    );
+};
+
+export default OverlayHeader;

package/src/components/flyout/__tests__/Flyout.test.js

@@ -938,4 +938,19 @@ describe('components/flyout/Flyout', () => {
             instance.handleOverlayClose();
         });
     });
+
+    describe('isResponsive', () => {
+        test('should have correct className when isResponsive is true', () => {
+            const wrapper = shallow(
+                <Flyout isResponsive>
+                    <FakeButton />
+                    <FakeOverlay />
+                </Flyout>,
+            );
+
+            expect(wrapper.prop('classes')).toEqual({
+                element: `flyout-overlay bdl-Flyout--responsive`,
+            });
+        });
+    });
 });

package/src/components/flyout/__tests__/OverlayHeader.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import FlyoutContext from '../FlyoutContext';
+import OverlayHeader from '../OverlayHeader';
+
+describe('components/flyout/OverlayHeader', () => {
+    describe('render()', () => {
+        test('should render correctly with custom className', () => {
+            const classNameCustom = 'oh-class';
+            const classNameChild = 'child-class';
+            const { container } = render(
+                <OverlayHeader className={classNameCustom}>
+                    <div className={classNameChild} />
+                </OverlayHeader>,
+            );
+
+            expect(container.firstChild).toHaveClass('bdl-OverlayHeader');
+            expect(screen.queryByTestId('bdl-CloseButton')).toBeInTheDocument();
+            expect(container.querySelector(`.${classNameCustom}`)).toBeInTheDocument();
+            expect(container.querySelector(`.${classNameChild}`)).toBeInTheDocument();
+        });
+    });
+
+    describe('closeOverlay()', () => {
+        test('should call closeOverlay() from context when CloseButton clicked', () => {
+            const closeOverlay = jest.fn();
+            render(
+                <FlyoutContext.Provider value={{ closeOverlay }}>
+                    <OverlayHeader>
+                        <p>Hi</p>
+                    </OverlayHeader>
+                </FlyoutContext.Provider>,
+            );
+
+            fireEvent.click(screen.getByRole('button'));
+            expect(closeOverlay).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('handleClick()', () => {
+        test('should prevent default and stop propagation when elements in handleClick called', () => {
+            const overlayClick = jest.fn();
+            render(
+                <div role="presentation" onClick={overlayClick}>
+                    <OverlayHeader>
+                        <p>Hi</p>
+                    </OverlayHeader>
+                </div>,
+            );
+
+            fireEvent.click(screen.getByRole('button'));
+            expect(overlayClick).toHaveBeenCalledTimes(0);
+        });
+    });
+});

package/src/components/flyout/_variables.scss

@@ -0,0 +1 @@
+$bdl-OverlayHeader-height: 64px;

package/src/components/flyout/index.js

@@ -1,3 +1,5 @@
 // @flow
 export { default as Flyout } from './Flyout';
+export { default as FlyoutContext } from './FlyoutContext';
 export { default as Overlay } from './Overlay';
+export { default as OverlayHeader } from './OverlayHeader';

package/src/components/image-tooltip/ImageTooltip.tsx

@@ -31,8 +31,7 @@ const ImageTooltip = ({ children, className, content, image, title, ...otherTool
         </ImageTooltipContent>
     );
 
-    const imageTooltipClasses = classNames('bdl-ImageTooltip', {
-        className,
+    const imageTooltipClasses = classNames('bdl-ImageTooltip', className, {
         'bdl-is-image-loaded': isImageLoaded,
     });
 

package/src/components/media-query/__tests__/useMediaQuery.test.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React from 'react';
+import { mount } from 'enzyme';
+import useMediaQuery from '../useMediaQuery';
+
+const WIDTH = 999;
+const HEIGHT = 998;
+
+type Props = {
+    children?: React.node,
+};
+
+function FakeComponent(props: Props) {
+    const mediaProps = useMediaQuery();
+
+    return <div>{props.children(mediaProps)}</div>;
+}
+
+function setWindowProperty(prop, value) {
+    Object.defineProperty(window, prop, {
+        writable: true,
+        value,
+    });
+}
+
+describe('components/media-query/useMediaQuery', () => {
+    test('returns correct view width and height', () => {
+        setWindowProperty('innerWidth', WIDTH);
+        setWindowProperty('innerHeight', HEIGHT);
+
+        const mountedComponent = mount(
+            <FakeComponent>
+                {mediaProps => {
+                    return (
+                        <div>
+                            <div className="height">{mediaProps.viewHeight}</div>
+                            <div className="width">{mediaProps.viewWidth}</div>
+                        </div>
+                    );
+                }}
+            </FakeComponent>,
+        );
+
+        expect(mountedComponent.find('.height').text()).toBe(`${HEIGHT}`);
+        expect(mountedComponent.find('.width').text()).toBe(`${WIDTH}`);
+    });
+});

package/src/components/media-query/__tests__/withMediaQuery.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import withMediaQuery from '../withMediaQuery';
+
+describe('elements/common/media-query/withMediaQuery', () => {
+    const WrappedComponent = () => <div />;
+    const WithMediaComponent = withMediaQuery(WrappedComponent);
+
+    const getWrapper = props => shallow(<WithMediaComponent {...props} />);
+
+    test('wraps component with media query props', () => {
+        const container = mount(<WithMediaComponent />);
+
+        const containerProps = container.find('WrappedComponent').props();
+
+        expect(containerProps.size).not.toBeNull();
+        expect(containerProps.pointer).not.toBeNull();
+        expect(containerProps.anyPointer).not.toBeNull();
+        expect(containerProps.hover).not.toBeNull();
+        expect(containerProps.anyHover).not.toBeNull();
+    });
+
+    test('should render inner component', () => {
+        const props = {};
+        const wrapper = getWrapper(props);
+
+        expect(wrapper.find(WrappedComponent)).toHaveLength(1);
+    });
+});

package/src/components/media-query/constants.js

@@ -0,0 +1,32 @@
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+
+export const SIZE_SMALL = smallScreen;
+export const SIZE_MEDIUM = mediumScreen;
+export const SIZE_LARGE = largeScreen;
+
+export const HOVER = '(hover: hover)';
+export const ANY_HOVER = '(any-hover: hover)';
+
+export const POINTER_FINE = '(pointer: fine)';
+export const POINTER_COARSE = '(pointer: coarse)';
+
+export const ANY_POINTER_FINE = '(any-pointer: fine)';
+export const ANY_POINTER_COARSE = '(any-pointer: coarse)';
+
+export const POINTER_TYPE = {
+    fine: 'fine',
+    coarse: 'coarse',
+    none: 'none',
+};
+
+export const HOVER_TYPE = {
+    hover: 'hover',
+    none: 'none',
+};
+
+export const VIEW_SIZE_TYPE = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    xlarge: 'x-large',
+};

package/src/components/media-query/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as withMediaQuery } from './withMediaQuery';

package/src/components/media-query/stories/MediaQuery.stories.js

@@ -0,0 +1,80 @@
+// @flow
+
+import * as React from 'react';
+
+import { VIEW_SIZE_TYPE } from '../constants';
+import notes from './MediaQuery.stories.md';
+import useMediaQuery from '../useMediaQuery';
+import withMediaQuery from '../withMediaQuery';
+
+export const CustomHook = () => {
+    const { hover, pointer, size, viewWidth, viewHeight } = useMediaQuery();
+
+    return (
+        <div>
+            <p>
+                <b>Hover:</b>
+                <span>{` ${hover}`}</span>
+            </p>
+            <p>
+                <b>Pointer:</b>
+                <span>{` ${pointer}`}</span>
+            </p>
+            <p>
+                <b>View Dimensions:</b>
+                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>
+            </p>
+            {size === VIEW_SIZE_TYPE.small && <h4>This view is small</h4>}
+            {size === VIEW_SIZE_TYPE.medium && <h3>This view is medium</h3>}
+            {size === VIEW_SIZE_TYPE.large && <h2>This view is large</h2>}
+            {size === VIEW_SIZE_TYPE.xlarge && <h1>This view is xlarge</h1>}
+        </div>
+    );
+};
+
+type Props = {
+    children?: any,
+    hover: string,
+    pointer: string,
+    size: string,
+    viewHeight: number,
+    viewWidth: number,
+};
+
+const DemoComponent = (props: Props) => {
+    const { hover, pointer, size, viewWidth, viewHeight } = props;
+
+    return (
+        <div>
+            <p>
+                <b>Hover:</b>
+                <span>{` ${hover}`}</span>
+            </p>
+            <p>
+                <b>Pointer:</b>
+                <span>{` ${pointer}`}</span>
+            </p>
+            <p>
+                <b>View Dimensions:</b>
+                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>
+            </p>
+            {size === 'small' && <h4>This view is small</h4>}
+            {size === 'medium' && <h3>This view is medium</h3>}
+            {size === 'large' && <h2>This view is large</h2>}
+            {size === 'x-large' && <h1>This view is xlarge</h1>}
+        </div>
+    );
+};
+
+export const HigherOrderComponent = withMediaQuery(DemoComponent);
+
+export default {
+    title: 'Components|MediaQuery',
+    component: useMediaQuery,
+    parameters: {
+        notes,
+        viewport: {
+            defaultViewport: 'tablet',
+        },
+    },
+};

package/src/components/media-query/stories/MediaQuery.stories.md

@@ -0,0 +1,29 @@
+`import useMediaQuery from 'box-ui-elements/es/components/media-query/useMediaQuery';`
+
+The `useMediaQuery` hook returns properties composed of specific media queries and view dimensions.
+These properties can be used to implement custom component rendering or behavior.
+
+## Return props
+
+| Property     | Description                            |
+| ------------ | -------------------------------------- |
+| `anyHover`   | `hover`, `none`                        |
+| `anyPointer` | `none`, `coarse`, `fine`               |
+| `hover`      | `hover`, `none`                        |
+| `pointer`    | `none`, `coarse`, `fine`               |
+| `size`       | `small`, `medium`, `large`, `x-large`  |
+| `viewHeight` | view height in px of last query change |
+| `viewWidth`  | view width in px of last query change  |
+
+## `size` properties
+
+| Size      | Query                                        |
+| --------- | -------------------------------------------- |
+| `small`   | `(max-width: 374px)`                         |
+| `medium`  | `(min-width: 375px) and (max-width: 767px)`  |
+| `large`   | `(min-width: 768px) and (max-width: 1023px)` |
+| `x-large` | `(min-width: 1024px)`                        |
+
+## Demo
+
+Change device size in "Canvas" or in browser developer tools

package/src/components/media-query/types.js

@@ -0,0 +1,29 @@
+// @flow
+
+import { POINTER_TYPE, HOVER_TYPE } from './constants';
+
+export type MediaPointerType = POINTER_TYPE.none | POINTER_TYPE.coarse | POINTER_TYPE.fine;
+export type MediaHoverType = HOVER_TYPE.none | HOVER_TYPE.hover;
+
+export type MediaFeatures = {
+    anyHover?: MediaHoverType,
+    anyPointer?: MediaPointerType,
+    hover?: MediaHoverType,
+    maxHeight?: number,
+    maxWidth?: number,
+    minHeight?: number,
+    minWidth?: number,
+    pointer?: MediaPointerType,
+};
+
+export type MediaShape = {
+    anyHover: MediaHoverType,
+    anyPointer: MediaPointerType,
+    hover: MediaHoverType,
+    pointer: MediaPointerType,
+    size: boolean,
+    viewHeight: number,
+    viewWidth: number,
+};
+
+export type MediaQuery = string | MediaFeatures;