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

package/src/components/close-button/CloseButton.js.flow

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+
+import Button from '../button';
+import IconClose from '../../icons/general/IconClose';
+import { bdlGray62 } from '../../styles/variables';
+
+import './CloseButton.scss';
+
+type Props = {
+    /** Custom class for the close button */
+    className?: string,
+    /** onClick handler for the close button */
+    onClick?: Function,
+}
+
+const CloseButton = ({ className, onClick }: Props) => {
+    return (
+        <Button className={classNames('bdl-CloseButton', className)} onClick={onClick} type="button">
+            <IconClose color={bdlGray62} height={18} width={18} />
+        </Button>
+    );
+};
+
+export default CloseButton;

package/src/components/close-button/CloseButton.scss

@@ -0,0 +1,10 @@
+@import '../../styles/variables';
+
+.btn.bdl-CloseButton {
+    width: $bdl-btn-height;
+    height: $bdl-btn-height;
+    padding: 0;
+    background-color: $bdl-gray-10;
+    border: none;
+    border-radius: $bdl-border-radius-size-med;
+}

package/src/components/close-button/CloseButton.stories.md

@@ -0,0 +1 @@
+`import CloseButton from 'box-ui-elements/es/components/close-button';`

package/src/components/close-button/CloseButton.stories.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import CloseButton from './CloseButton';
+import notes from './CloseButton.stories.md';
+
+export const regular = () => <CloseButton />;
+
+export default {
+    title: 'Components|Buttons/CloseButton',
+    component: CloseButton,
+    parameters: {
+        notes,
+    },
+};

package/src/components/close-button/CloseButton.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import Button, { ButtonType } from '../button';
+import IconClose from '../../icons/general/IconClose';
+import { bdlGray62 } from '../../styles/variables';
+
+import './CloseButton.scss';
+
+export interface CloseButtonProps {
+    /** Custom class for the close button */
+    className?: string;
+    /** onClick handler for the close button */
+    onClick?: Function;
+}
+
+const CloseButton = ({ className, onClick }: CloseButtonProps) => {
+    return (
+        <Button
+            className={classNames('bdl-CloseButton', className)}
+            data-testid="bdl-CloseButton"
+            onClick={onClick}
+            type={ButtonType.BUTTON}
+        >
+            <IconClose color={bdlGray62} height={18} width={18} />
+        </Button>
+    );
+};
+
+export default CloseButton;

package/src/components/close-button/__tests__/CloseButton.stories.test.tsx

@@ -0,0 +1,6 @@
+describe('components/close-button/CloseButton', () => {
+    test.each(['components-buttons-closebutton'])('looks visually correct when using story %s', async id => {
+        const image = await BoxVisualTestUtils.takeScreenshot(id);
+        return expect(image).toMatchImageSnapshot();
+    });
+});

package/src/components/close-button/__tests__/CloseButton.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import CloseButton from '../CloseButton';
+
+describe('components/close-button/CloseButton', () => {
+    describe('render()', () => {
+        test('should correctly render', () => {
+            render(<CloseButton />);
+
+            const closeButton = screen.getByRole('button');
+
+            expect(closeButton).toHaveAttribute('type', 'button');
+            expect(closeButton).toHaveClass('bdl-CloseButton');
+        });
+
+        test('should have custom className', () => {
+            const customClass = 'custom-class';
+            render(<CloseButton className={customClass} />);
+
+            const closeButton = screen.getByRole('button');
+            expect(closeButton).toHaveClass(customClass);
+            expect(closeButton).toHaveClass('bdl-CloseButton');
+        });
+    });
+
+    describe('onClick()', () => {
+        test('should call custom handler when clicked', () => {
+            const handleClick = jest.fn();
+            render(<CloseButton onClick={handleClick} />);
+
+            const closeButton = screen.getByRole('button');
+
+            fireEvent.click(closeButton);
+
+            expect(handleClick).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/src/components/close-button/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './CloseButton';

package/src/components/close-button/index.ts

@@ -0,0 +1 @@
+export { default } from './CloseButton';

package/src/components/date-picker/AccessiblePikaday.ts

@@ -0,0 +1,79 @@
+import Pikaday, { PikadayOptions } from 'pikaday';
+
+export interface AccessiblePikadayOptions extends PikadayOptions {
+    accessibleFieldEl?: HTMLElement | null | undefined;
+    datePickerButtonEl?: HTMLElement | null | undefined;
+}
+
+// An extended version of Pikaday to work when `isAccessible` prop is `true`
+class AccessiblePikaday extends Pikaday {
+    accessibleFieldEl: HTMLElement | null | undefined;
+
+    datePickerButtonEl: HTMLElement | null | undefined;
+
+    constructor(options: AccessiblePikadayOptions) {
+        super(options);
+        this.accessibleFieldEl = options.accessibleFieldEl;
+        this.datePickerButtonEl = options.datePickerButtonEl;
+
+        // Override behavior as if `options.field` and `options.bound` were set.
+        // See https://github.com/Pikaday/Pikaday/blob/master/pikaday.js#L671
+        //     https://github.com/Pikaday/Pikaday/blob/master/pikaday.js#L695-L703
+        if (this.accessibleFieldEl) {
+            this.el.classList.add('is-bound');
+            document.body.appendChild(this.el);
+
+            this.accessibleFieldEl.addEventListener('blur', this.handleBlur);
+
+            this.hide();
+        }
+    }
+
+    handleBlur = () => {
+        this.hide();
+    };
+
+    handleClickOutside = (event: MouseEvent) => {
+        if (
+            this.isVisible() &&
+            this.datePickerButtonEl &&
+            this.datePickerButtonEl.contains(event.target as HTMLElement)
+        ) {
+            return;
+        }
+
+        if (this.isVisible() && !this.el.contains(event.target as HTMLElement)) {
+            this.hide();
+
+            const currentFocusEl = document.activeElement as HTMLElement;
+            if (this.accessibleFieldEl && currentFocusEl && currentFocusEl.tabIndex < 0) {
+                this.accessibleFieldEl.focus();
+            }
+        }
+    };
+
+    show() {
+        super.show();
+        if (this.accessibleFieldEl) {
+            document.addEventListener('click', this.handleClickOutside, true);
+            this.adjustPosition();
+        }
+    }
+
+    hide() {
+        super.hide();
+        if (this.accessibleFieldEl) {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
+    }
+
+    destroy() {
+        super.destroy();
+        if (this.accessibleFieldEl) {
+            this.accessibleFieldEl.removeEventListener('blur', this.handleBlur);
+            document.removeEventListener('click', this.handleClickOutside);
+        }
+    }
+}
+
+export default AccessiblePikaday;

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

@@ -23,10 +23,16 @@
     }
 
     .date-picker-input {
+        min-width: 160px;
+        height: 32px;
         margin-top: 5px;
         margin-bottom: 0;
-        padding-right: 30px;
+        padding-right: 6px;
         text-overflow: ellipsis;
+
+        &::-webkit-calendar-picker-indicator {
+            display: none;
+        }
     }
 
     .date-picker-input:focus ~ .tooltip,
@@ -38,33 +44,27 @@
     .date-picker-open-btn {
         position: absolute;
         right: 7px;
-        bottom: 10px;
-        display: inline-block;
-        height: 17px;
+        bottom: 8px;
+        display: inline-flex;
+        background-color: $white;
+    }
+
+    .date-picker-open-btn:hover {
+        cursor: pointer;
     }
 
     .date-picker-clear-btn,
     .date-picker-icon-alert {
         position: absolute;
         right: 30px;
-        bottom: 10px;
-        display: inline-block;
+        bottom: 8px;
+        display: inline-flex;
 
         span {
             display: inline-block;
         }
     }
 
-    .date-picker-clear-btn,
-    .date-picker-clear-btn:active,
-    .date-picker-clear-btn:focus,
-    .date-picker-clear-btn:hover,
-    .date-picker-clear-btn:active:focus,
-    .date-picker-clear-btn:active:hover,
-    .date-picker-clear-btn span {
-        height: 14px;
-    }
-
     .date-picker-clear-btn {
         path {
             transition: fill linear .1s;
@@ -76,7 +76,6 @@
     > .date-picker-clear-btn:focus {
         path {
             fill: $bdl-gray-80;
-            path: $bdl-gray-80;
         }
     }
 
@@ -91,21 +90,32 @@
         }
     }
 
+    .date-picker-clear-btn:focus,
+    .date-picker-open-btn:focus {
+        margin: -1px;
+        border: 1px solid $bdl-box-blue;
+        border-radius: $bdl-border-radius-size;
+    }
+
     .date-picker-icon-alert {
         path {
             fill: $bdl-watermelon-red;
         }
     }
 
+    &.show-error {
+        .date-picker-input {
+            border-color: $bdl-watermelon-red;
+        }
+    }
+
     &.show-clear-btn.show-error {
-        .date-picker-clear-btn,
-        .date-picker-clear-btn:hover,
-        .date-picker-clear-btn:active {
+        .date-picker-clear-btn {
             right: 25px;
         }
 
-        .date-picker-input {
-            padding-right: 50px;
+        .date-picker-icon-alert {
+            right: 42px;
         }
     }
 }

package/src/components/date-picker/DatePicker.stories.tsx

@@ -91,6 +91,12 @@ export const manuallyEditable = () => (
     </IntlProvider>
 );
 
+export const manuallyEditableAndAccessible = () => (
+    <IntlProvider locale="en-US">
+        <DatePicker isAccessible placeholder="Date" label="Date Picker" value={new Date('August 10, 2021')} />
+    </IntlProvider>
+);
+
 export const withLimitedDateRange = () => {
     const maxDate = new Date('February 25, 2021');
     const sixDays = 1000 * 60 * 60 * 24 * 6;