box-ui-elements 14.0.0 → 14.1.0-beta.11

package/src/components/guide-tooltip/__tests__/GuideTooltip.test.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import GuideTooltip from '../GuideTooltip';
 import FolderShared32 from '../../../icon/content/FolderShared32';
 
@@ -8,24 +8,78 @@ describe('components/guide-tooltip/GuideTooltip', () => {
     const title = <div>title</div>;
     const body = <div>body</div>;
     const icon = <FolderShared32 />;
+    const image = <img alt="test" src="test" />;
     const steps = [1, 3];
     const primaryButtonProps = { children: 'Next' };
     const secondaryButtonProps = { children: 'Previous' };
 
-    const getWrapper = props => shallow(<GuideTooltip {...props} />);
+    const getWrapper = props =>
+        mount(
+            <GuideTooltip {...props}>
+                <div />
+            </GuideTooltip>,
+        );
 
     test('should render with title and body', () => {
         const wrapper = getWrapper({ body, title });
-        expect(wrapper).toMatchSnapshot();
+
+        // hidden elements
+        expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
+        // visible elements
+        expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
+        expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
     });
 
     test('should render with just body', () => {
         const wrapper = getWrapper({ body });
-        expect(wrapper).toMatchSnapshot();
+
+        // hidden elements
+        expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
+        expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
+        // visible elements
+        expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
+    });
+
+    test('should render with all options but icon', () => {
+        const wrapper = getWrapper({ body, title, image, primaryButtonProps, secondaryButtonProps, steps });
+
+        // hidden elements
+        expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
+        // visible elements
+        expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
+        expect(wrapper.find('.bdl-GuideTooltip-image img').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
+        expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
+        expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
     });
 
-    test('should render with all options', () => {
-        const wrapper = getWrapper({ body, title, icon, primaryButtonProps, secondaryButtonProps, steps });
-        expect(wrapper).toMatchSnapshot();
+    test('should render with all options but image', () => {
+        const wrapper = getWrapper({ body, title, icon, image, primaryButtonProps, secondaryButtonProps, steps });
+
+        // hidden elements
+        expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
+        // visible elements
+        expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
+        expect(wrapper.find('.bdl-GuideTooltip-icon FolderShared32').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
+        expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
+        expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
+        expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
     });
 });

package/src/components/hotkeys/HotkeyHelpModal.scss

@@ -32,7 +32,7 @@
             padding: 2px 4px;
             background: $white;
             border: 1px solid $bdl-gray-30;
-            border-radius: 3px;
+            border-radius: $bdl-border-radius-size;
             box-shadow: 0 1px 0 $bdl-gray-30;
         }
     }

package/src/components/link/LinkButton.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import LinkBase, { LinkBaseProps } from './LinkBase';
 
 export interface LinkButtonProps extends LinkBaseProps {
     children: React.ReactChild;
     className?: string;
+    size?: 'large';
 }
 
-const LinkButton = ({ className = '', ...rest }: LinkButtonProps) => (
-    <LinkBase className={`btn ${className}`} {...rest} />
+const LinkButton = ({ className = '', size, ...rest }: LinkButtonProps) => (
+    <LinkBase className={classNames('btn', className, { 'bdl-btn--large': size === 'large' })} {...rest} />
 );
 
 export default LinkButton;

package/src/components/link/LinkPrimaryButton.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 
-import LinkButton from './LinkButton';
-import { LinkBaseProps } from './LinkBase';
+import LinkButton, { LinkButtonProps } from './LinkButton';
 
-export interface LinkPrimaryButtonProps extends LinkBaseProps {
-    children: React.ReactChild;
+export interface LinkPrimaryButtonProps extends LinkButtonProps {
     className?: string;
 }
 

package/src/components/link/__tests__/Link.test.tsx

@@ -90,6 +90,13 @@ describe('components/link/Link', () => {
         expect(wrapper.find('a').prop('href')).toEqual('#');
     });
 
+    test('should correctly render LinkButton with size=large prop', () => {
+        const wrapper = mount(<LinkButton size="large">a link</LinkButton>);
+
+        expect(wrapper.find('a').hasClass('btn')).toBe(true);
+        expect(wrapper.find('a').hasClass('bdl-btn--large')).toBe(true);
+    });
+
     test('should correctly render LinkButton with proper href', () => {
         const wrapper = mount(<LinkButton href="foo">a link</LinkButton>);
 
@@ -118,6 +125,14 @@ describe('components/link/Link', () => {
         expect(wrapper.find('a').prop('href')).toEqual('#');
     });
 
+    test('should correctly render LinkPrimaryButton with size=large prop', () => {
+        const wrapper = mount(<LinkPrimaryButton size="large">a link</LinkPrimaryButton>);
+
+        expect(wrapper.find('a').hasClass('btn')).toBe(true);
+        expect(wrapper.find('a').hasClass('btn-primary')).toBe(true);
+        expect(wrapper.find('a').hasClass('bdl-btn--large')).toBe(true);
+    });
+
     test('should correctly render LinkPrimaryButton with proper href', () => {
         const wrapper = mount(<LinkPrimaryButton href="foo">a link</LinkPrimaryButton>);
 

package/src/components/link/__tests__/LinkButton.stories.test.tsx

@@ -1,9 +1,10 @@
 describe('components/link/LinkButton', () => {
-    test.each(['components-links-linkbutton--basic', 'components-links-linkbutton--with-custom-component'])(
-        'looks visually correct when using story %s',
-        async id => {
-            const image = await BoxVisualTestUtils.takeScreenshot(id);
-            return expect(image).toMatchImageSnapshot();
-        },
-    );
+    test.each([
+        'components-links-linkbutton--basic',
+        'components-links-linkbutton--large',
+        'components-links-linkbutton--with-custom-component',
+    ])('looks visually correct when using story %s', async id => {
+        const image = await BoxVisualTestUtils.takeScreenshot(id);
+        return expect(image).toMatchImageSnapshot();
+    });
 });

package/src/components/link/__tests__/LinkPrimaryButton.stories.test.tsx

@@ -1,6 +1,7 @@
 describe('components/link/LinkPrimaryButton', () => {
     test.each([
         'components-links-linkprimarybutton--basic',
+        'components-links-linkprimarybutton--large',
         'components-links-linkprimarybutton--with-custom-component',
     ])('looks visually correct when using story %s', async id => {
         const image = await BoxVisualTestUtils.takeScreenshot(id);

package/src/components/link/stories/LinkButton.stories.tsx

@@ -1,10 +1,24 @@
 import * as React from 'react';
 import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import { select } from '@storybook/addon-knobs';
 
 import LinkButton from '../LinkButton';
 import notes from './LinkButton.stories.md';
 
-export const basic = () => <LinkButton href="https://www.box.com/platform">A link that looks like a Button</LinkButton>;
+export const basic = () => (
+    <LinkButton
+        href="https://www.box.com/platform"
+        size={select('size', { None: undefined, Large: 'large' }, undefined)}
+    >
+        A link that looks like a Button
+    </LinkButton>
+);
+
+export const large = () => (
+    <LinkButton href="https://www.box.com/platform" size="large">
+        A link that looks like a Button
+    </LinkButton>
+);
 
 export const withCustomComponent = () => {
     // You can pass a custom component to be used instead of the default "a" tag, like a React Router link:

package/src/components/link/stories/LinkPrimaryButton.stories.tsx

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import { select } from '@storybook/addon-knobs';
 
 import LinkPrimaryButton from '../LinkPrimaryButton';
 import notes from './LinkPrimaryButton.stories.md';
 
 export const basic = () => (
-    <LinkPrimaryButton href="https://www.box.com/platform">A link that looks like a PrimaryButton</LinkPrimaryButton>
+    <LinkPrimaryButton
+        href="https://www.box.com/platform"
+        size={select('size', { None: undefined, Large: 'large' }, undefined)}
+    >
+        A link that looks like a PrimaryButton
+    </LinkPrimaryButton>
+);
+
+export const large = () => (
+    <LinkPrimaryButton href="https://www.box.com/platform" size="large">
+        A link that looks like a PrimaryButton
+    </LinkPrimaryButton>
 );
 
 export const withCustomComponent = () => {

package/src/components/loading-indicator/Crawler.scss

@@ -16,7 +16,7 @@
     width: 2px;
     height: 10px;
     background-color: $primary-color;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
     -webkit-animation: crawler .66s infinite ease-in-out;
     animation: crawler .66s infinite ease-in-out;
 }

package/src/components/modal/Modal.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import '../../styles/mixins/buttons';
 
 /**************************************
  * Modal
@@ -59,8 +60,7 @@
     padding: 30px;
     background-color: $white;
     background-clip: padding-box;
-    border: 1px solid $bdl-gray-30;
-    border-radius: $bdl-border-radius-size;
+    border-radius: $bdl-border-radius-size-xlarge;
     box-shadow: 0 1px 1px 1px fade-out($black, .95);
 }
 
@@ -70,6 +70,7 @@
     max-width: 100%;
     margin: 0;
     overflow: hidden;
+    font-weight: bold;
     font-size: 16px;
     line-height: inherit;
     word-wrap: break-word;
@@ -116,6 +117,8 @@
     }
 
     .btn {
+        @include bdl-Button--large;
+
         margin-top: 0;
         margin-bottom: 0;
     }

package/src/components/modal/ModalDialog.js

@@ -5,7 +5,7 @@ import omit from 'lodash/omit';
 import uniqueId from 'lodash/uniqueId';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconClose from '../../icons/general/IconClose';
+import IconClose from '../../icon/fill/X16';
 
 const ALERT_TYPE = 'alert';
 const DIALOG_TYPE = 'dialog';

package/src/components/notification/Notification.js

@@ -3,13 +3,11 @@ import * as React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { bdlGray } from '../../styles/variables';
-
-import IconAlertCircle from '../../icons/general/IconAlertCircle';
-import IconBell from '../../icons/general/IconBell';
-import IconClose from '../../icons/general/IconClose';
-import IconInfoThin from '../../icons/general/IconInfoThin';
-import IconSync from '../../icons/general/IconSync';
+import InfoBadge16 from '../../icon/line/InfoBadge16';
+import CircleCheck16 from '../../icon/line/CircleCheck16';
+import TriangleAlert16 from '../../icon/line/TriangleAlert16';
+import XBadge16 from '../../icon/line/XBadge16';
+import X16 from '../../icon/fill/X16';
 
 import type { NotificationType } from '../../common/types/core';
 
@@ -32,10 +30,10 @@ const DURATION_TIMES = {
 };
 
 const ICON_RENDERER: { [string]: Function } = {
-    [TYPE_DEFAULT]: () => <IconBell />,
-    [TYPE_ERROR]: () => <IconAlertCircle />,
-    [TYPE_INFO]: () => <IconSync />,
-    [TYPE_WARN]: () => <IconInfoThin />,
+    [TYPE_DEFAULT]: () => <InfoBadge16 />,
+    [TYPE_ERROR]: () => <XBadge16 />,
+    [TYPE_INFO]: () => <CircleCheck16 />,
+    [TYPE_WARN]: () => <TriangleAlert16 />,
 };
 
 const messages = defineMessages({
@@ -109,7 +107,7 @@ class Notification extends React.Component<Props> {
         return (
             <div className={classes}>
                 {React.cloneElement(ICON_RENDERER[type](), {
-                    color: bdlGray,
+                    color: '#fff',
                     height: 20,
                     width: 20,
                 })}
@@ -120,7 +118,7 @@ class Notification extends React.Component<Props> {
                     onClick={this.onClose}
                     type="button"
                 >
-                    <IconClose color={bdlGray} height={18} width={18} />
+                    <X16 />
                 </button>
             </div>
         );

package/src/components/notification/Notification.scss

@@ -23,22 +23,26 @@
     overflow: hidden;
     color: $bdl-gray;
     font-weight: bold;
-    background-color: $bdl-gray-40;
-    border-radius: 4px;
+    background-color: $bdl-gray-10;
+    border: 2px solid $bdl-gray;
+    border-radius: $bdl-border-radius-size-large;
     box-shadow: 0 2px 6px fade-out($black, .85);
-    opacity: .9;
+    opacity: 1;
     transition: opacity .1s ease-out;
 
     &.info {
-        background-color: $bdl-green-light-50;
+        background-color: $bdl-green-light-20;
+        border-color: $bdl-green-light;
     }
 
     &.warn {
-        background-color: $bdl-yellorange-50;
+        background-color: $bdl-yellorange-20;
+        border-color: $bdl-yellorange;
     }
 
     &.error {
-        background-color: $bdl-watermelon-red-50;
+        background-color: $bdl-watermelon-red-20;
+        border-color: $bdl-watermelon-red;
     }
 
     &.is-hidden {
@@ -72,26 +76,27 @@
     a {
         flex: none;
         color: $bdl-gray;
-        border-color: $bdl-gray;
+        font-weight: bold;
 
         &.btn.is-disabled,
         &.btn:not(.is-disabled) {
             margin: 0 5px;
             padding: 7px 13px;
             background-color: transparent;
-            border-color: inherit;
+            border-color: $bdl-gray;
         }
 
         &.close-btn {
             display: flex;
-            padding: 2px 7px;
-            font-weight: bold;
-            font-size: 14px;
+            align-items: center;
             background: none;
             border: none;
             outline: none;
             cursor: pointer;
-            opacity: .6;
+
+            & path {
+                fill: $bdl-gray;
+            }
         }
     }
 }

package/src/components/notification/__tests__/Notification.test.js

@@ -48,15 +48,15 @@ describe('components/notification/Notification', () => {
 
         test('should render a correct icon when initialized', () => {
             const component = mount(<Notification type={type}>test</Notification>);
-            const iconBellCount = type === TYPE_DEFAULT ? 1 : 0;
-            const iconSyncCount = type === TYPE_INFO ? 1 : 0;
-            const iconAlertCircleCount = type === TYPE_ERROR ? 1 : 0;
-            const iconInfoThinCount = type === TYPE_WARN ? 1 : 0;
-
-            expect(component.find('IconBell').length).toBe(iconBellCount);
-            expect(component.find('IconAlertCircle').length).toBe(iconAlertCircleCount);
-            expect(component.find('IconSync').length).toBe(iconSyncCount);
-            expect(component.find('IconInfoThin').length).toBe(iconInfoThinCount);
+            const infoBadge16Count = type === TYPE_DEFAULT ? 1 : 0;
+            const CircleCheck16Count = type === TYPE_INFO ? 1 : 0;
+            const XBadge16Count = type === TYPE_ERROR ? 1 : 0;
+            const TriangleAlert16Count = type === TYPE_WARN ? 1 : 0;
+
+            expect(component.find('InfoBadge16').length).toBe(infoBadge16Count);
+            expect(component.find('XBadge16').length).toBe(XBadge16Count);
+            expect(component.find('CircleCheck16').length).toBe(CircleCheck16Count);
+            expect(component.find('TriangleAlert16').length).toBe(TriangleAlert16Count);
         });
     });
 

package/src/components/pill-selector-dropdown/PillSelector.scss

@@ -25,7 +25,7 @@
         overflow-y: auto;
         background-color: $white;
         border: 1px solid darken($white, 20%);
-        border-radius: $bdl-border-radius-size;
+        border-radius: $bdl-border-radius-size-med;
         box-shadow: inset 0 1px 1px fade-out($black, .92);
         cursor: text;
         transition: border-color linear .15s, box-shadow linear .15s;