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

package/es/components/badge/Badge.scss

@@ -14,7 +14,7 @@
     text-align: center;
     text-decoration: none;
     background: $bdl-gray-10;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 }
 
 .badge-info {

package/es/components/button/Button.js

@@ -84,13 +84,15 @@ function (_React$Component) {
       var _this$props2 = this.props,
           children = _this$props2.children,
           className = _this$props2.className,
+          icon = _this$props2.icon,
           isDisabled = _this$props2.isDisabled,
           isLoading = _this$props2.isLoading,
           isSelected = _this$props2.isSelected,
           setRef = _this$props2.setRef,
+          size = _this$props2.size,
           type = _this$props2.type,
           showRadar = _this$props2.showRadar,
-          rest = _objectWithoutProperties(_this$props2, ["children", "className", "isDisabled", "isLoading", "isSelected", "setRef", "type", "showRadar"]);
+          rest = _objectWithoutProperties(_this$props2, ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "setRef", "size", "type", "showRadar"]);
 
       var buttonProps = omit(rest, ['onClick']);
 
@@ -101,7 +103,9 @@ function (_React$Component) {
       var styleClassName = classNames('btn', {
         'is-disabled': isDisabled,
         'is-loading': isLoading,
-        'is-selected': isSelected
+        'is-selected': isSelected,
+        'bdl-btn--large': size === 'large',
+        'bdl-has-icon': !!icon
       }, className);
       var button = // eslint-disable-next-line react/button-has-type
       React.createElement("button", _extends({
@@ -115,9 +119,14 @@ function (_React$Component) {
         className: styleClassName,
         onClick: this.handleClick,
         type: type
-      }, buttonProps), React.createElement("span", {
+      }, buttonProps), children ? React.createElement("span", {
         className: "btn-content"
-      }, children), isLoading && React.createElement(LoadingIndicator, {
+      }, children) : null, icon ? React.createElement("span", {
+        className: "bdl-btn-icon"
+      }, React.cloneElement(icon, {
+        width: icon && children ? 16 : 20,
+        height: icon && children ? 16 : 20
+      })) : null, isLoading && React.createElement(LoadingIndicator, {
         className: "btn-loading-indicator"
       }));
 

package/es/components/button/Button.js.flow

@@ -11,6 +11,8 @@ type Props = {
     children?: React.Node,
     /** Custom class for the button */
     className?: string,
+    /** icon */
+    icon?: React.ElementType,
     /** whether the button is disabled or not */
     isDisabled?: boolean,
     /** whether the button is loading or not */
@@ -23,6 +25,8 @@ type Props = {
     setRef?: Function,
     /** whether to show a radar */
     showRadar: boolean,
+    /** button size */
+    size?: 'large',
     /** type for the button */
     type: 'button' | 'reset' | 'submit',
 };

package/es/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/Button.tsx"],"names":["React","classNames","omit","LoadingIndicator","RadarAnimation","ButtonType","Button","event","props","isDisabled","onClick","btnElement","classList","contains","preventDefault","stopPropagation","children","className","isLoading","isSelected","setRef","type","showRadar","rest","buttonProps","styleClassName","button","element","handleClick","Component","SUBMIT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,cAAP,MAA2B,UAA3B;AAEA,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;GAAAA,U,KAAAA,U;;IA0BNC,M;;;;;;;;;;;;;;;;;;iEACqC,I;;kEASzB,UAACC,KAAD,EAAoD;AAAA,wBAC9B,MAAKC,KADyB;AAAA,UACtDC,UADsD,eACtDA,UADsD;AAAA,UAC1CC,OAD0C,eAC1CA,OAD0C;;AAE9D,UAAID,UAAU,IAAK,MAAKE,UAAL,IAAmB,MAAKA,UAAL,CAAgBC,SAAhB,CAA0BC,QAA1B,CAAmC,aAAnC,CAAtC,EAA0F;AACtFN,QAAAA,KAAK,CAACO,cAAN;AACAP,QAAAA,KAAK,CAACQ,eAAN;AACA;AACH;;AACD,UAAIL,OAAJ,EAAa;AACTA,QAAAA,OAAO,CAACH,KAAD,CAAP;AACH;AACJ,K;;;;;;;6BAEQ;AAAA;;AAAA,yBACgG,KAAKC,KADrG;AAAA,UACGQ,QADH,gBACGA,QADH;AAAA,UACaC,SADb,gBACaA,SADb;AAAA,UACwBR,UADxB,gBACwBA,UADxB;AAAA,UACoCS,SADpC,gBACoCA,SADpC;AAAA,UAC+CC,UAD/C,gBAC+CA,UAD/C;AAAA,UAC2DC,MAD3D,gBAC2DA,MAD3D;AAAA,UACmEC,IADnE,gBACmEA,IADnE;AAAA,UACyEC,SADzE,gBACyEA,SADzE;AAAA,UACuFC,IADvF;;AAEL,UAAMC,WAAoC,GAAGtB,IAAI,CAACqB,IAAD,EAAO,CAAC,SAAD,CAAP,CAAjD;;AACA,UAAId,UAAJ,EAAgB;AACZe,QAAAA,WAAW,CAAC,eAAD,CAAX,GAA+B,IAA/B;AACH;;AAED,UAAMC,cAAc,GAAGxB,UAAU,CAC7B,KAD6B,EAE7B;AACI,uBAAeQ,UADnB;AAEI,sBAAcS,SAFlB;AAGI,uBAAeC;AAHnB,OAF6B,EAO7BF,SAP6B,CAAjC;AAUA,UAAIS,MAAM,GACN;AACA;AACI,QAAA,GAAG,EAAE,aAAAC,OAAO,EAAI;AACZ,UAAA,MAAI,CAAChB,UAAL,GAAkBgB,OAAlB;;AACA,cAAIP,MAAJ,EAAY;AACRA,YAAAA,MAAM,CAACO,OAAD,CAAN;AACH;AACJ,SANL;AAOI,QAAA,SAAS,EAAEF,cAPf;AAQI,QAAA,OAAO,EAAE,KAAKG,WARlB;AASI,QAAA,IAAI,EAAEP;AATV,SAUQG,WAVR,GAYI;AAAM,QAAA,SAAS,EAAC;AAAhB,SAA+BR,QAA/B,CAZJ,EAaKE,SAAS,IAAI,oBAAC,gBAAD;AAAkB,QAAA,SAAS,EAAC;AAA5B,QAblB,CAFJ;;AAkBA,UAAII,SAAJ,EAAe;AACXI,QAAAA,MAAM,GAAG,oBAAC,cAAD,QAAiBA,MAAjB,CAAT;AACH;;AAED,aAAOA,MAAP;AACH;;;;EA9DgB1B,KAAK,CAAC6B,S;;gBAArBvB,M,kBAGoB;AAClBW,EAAAA,SAAS,EAAE,EADO;AAElBC,EAAAA,SAAS,EAAE,KAFO;AAGlBI,EAAAA,SAAS,EAAE,KAHO;AAIlBD,EAAAA,IAAI,EAAEhB,UAAU,CAACyB;AAJC,C;;AA8D1B,eAAexB,MAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\nimport LoadingIndicator from '../loading-indicator';\nimport RadarAnimation from '../radar';\n\nexport enum ButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\nexport interface ButtonProps {\n    /** Child components for the button, generally localized text */\n    children?: React.ReactNode;\n    /** Custom class for the button */\n    className: string;\n    /** whether the button is disabled or not */\n    isDisabled?: boolean;\n    /** whether the button is loading or not */\n    isLoading: boolean;\n    /** whether the button is selected or not */\n    isSelected?: boolean;\n    /** onClick handler for the button */\n    onClick?: Function;\n    /** to set buttons inner ref */\n    setRef?: Function;\n    /** whether to show a radar */\n    showRadar: boolean;\n    /** type for the button */\n    type: ButtonType;\n}\n\nclass Button extends React.Component<ButtonProps> {\n    btnElement: HTMLButtonElement | null = null;\n\n    static defaultProps = {\n        className: '',\n        isLoading: false,\n        showRadar: false,\n        type: ButtonType.SUBMIT,\n    };\n\n    handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n        const { isDisabled, onClick } = this.props;\n        if (isDisabled || (this.btnElement && this.btnElement.classList.contains('is-disabled'))) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n        }\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    render() {\n        const { children, className, isDisabled, isLoading, isSelected, setRef, type, showRadar, ...rest } = this.props;\n        const buttonProps: Record<string, boolean> = omit(rest, ['onClick']);\n        if (isDisabled) {\n            buttonProps['aria-disabled'] = true;\n        }\n\n        const styleClassName = classNames(\n            'btn',\n            {\n                'is-disabled': isDisabled,\n                'is-loading': isLoading,\n                'is-selected': isSelected,\n            },\n            className,\n        );\n\n        let button = (\n            // eslint-disable-next-line react/button-has-type\n            <button\n                ref={element => {\n                    this.btnElement = element;\n                    if (setRef) {\n                        setRef(element);\n                    }\n                }}\n                className={styleClassName}\n                onClick={this.handleClick}\n                type={type}\n                {...buttonProps}\n            >\n                <span className=\"btn-content\">{children}</span>\n                {isLoading && <LoadingIndicator className=\"btn-loading-indicator\" />}\n            </button>\n        );\n        if (showRadar) {\n            button = <RadarAnimation>{button}</RadarAnimation>;\n        }\n\n        return button;\n    }\n}\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/components/button/Button.tsx"],"names":["React","classNames","omit","LoadingIndicator","RadarAnimation","ButtonType","Button","event","props","isDisabled","onClick","btnElement","classList","contains","preventDefault","stopPropagation","children","className","icon","isLoading","isSelected","setRef","size","type","showRadar","rest","buttonProps","styleClassName","button","element","handleClick","cloneElement","width","height","Component","SUBMIT"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\nimport LoadingIndicator from '../loading-indicator';\nimport RadarAnimation from '../radar';\nimport { SVGProps } from '../accessible-svg/AccessibleSVG';\n\nexport enum ButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\nexport interface ButtonProps {\n    /** Child components for the button, generally localized text */\n    children?: React.ReactNode;\n    /** Custom class for the button */\n    className: string;\n    /** icon component, can be paired with children (text) or on its own */\n    icon?: React.ReactElement;\n    /** whether the button is disabled or not */\n    isDisabled?: boolean;\n    /** whether the button is loading or not */\n    isLoading: boolean;\n    /** whether the button is selected or not */\n    isSelected?: boolean;\n    /** onClick handler for the button */\n    onClick?: Function;\n    /** to set buttons inner ref */\n    setRef?: Function;\n    /** size of the button */\n    size?: 'large';\n    /** whether to show a radar */\n    showRadar: boolean;\n    /** type for the button */\n    type: ButtonType;\n}\n\nclass Button extends React.Component<ButtonProps> {\n    btnElement: HTMLButtonElement | null = null;\n\n    static defaultProps = {\n        className: '',\n        isLoading: false,\n        showRadar: false,\n        type: ButtonType.SUBMIT,\n    };\n\n    handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n        const { isDisabled, onClick } = this.props;\n        if (isDisabled || (this.btnElement && this.btnElement.classList.contains('is-disabled'))) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n        }\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            icon,\n            isDisabled,\n            isLoading,\n            isSelected,\n            setRef,\n            size,\n            type,\n            showRadar,\n            ...rest\n        } = this.props;\n        const buttonProps: Record<string, boolean> = omit(rest, ['onClick']);\n        if (isDisabled) {\n            buttonProps['aria-disabled'] = true;\n        }\n\n        const styleClassName = classNames(\n            'btn',\n            {\n                'is-disabled': isDisabled,\n                'is-loading': isLoading,\n                'is-selected': isSelected,\n                'bdl-btn--large': size === 'large',\n                'bdl-has-icon': !!icon,\n            },\n            className,\n        );\n\n        let button = (\n            // eslint-disable-next-line react/button-has-type\n            <button\n                ref={element => {\n                    this.btnElement = element;\n                    if (setRef) {\n                        setRef(element);\n                    }\n                }}\n                className={styleClassName}\n                onClick={this.handleClick}\n                type={type}\n                {...buttonProps}\n            >\n                {children ? <span className=\"btn-content\">{children}</span> : null}\n                {icon ? (\n                    <span className=\"bdl-btn-icon\">\n                        {React.cloneElement<SVGProps>(icon, {\n                            width: icon && children ? 16 : 20,\n                            height: icon && children ? 16 : 20,\n                        })}\n                    </span>\n                ) : null}\n                {isLoading && <LoadingIndicator className=\"btn-loading-indicator\" />}\n            </button>\n        );\n        if (showRadar) {\n            button = <RadarAnimation>{button}</RadarAnimation>;\n        }\n\n        return button;\n    }\n}\n\nexport default Button;\n"],"file":"Button.js"}

package/es/components/button/Button.stories.js

@@ -1,15 +1,34 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
+import * as vars from '../../styles/variables';
+import PrimaryButton from '../primary-button';
+import Icon from '../../icon/line/Plus16';
+import Icon2 from '../../icons/general/IconEllipsis'; // @ts-ignore flow import
+
+import InlineNotice from '../inline-notice';
 import Button from './Button';
 import notes from './Button.stories.md';
 export var regular = function regular() {
+  var selectIcon = select('icon', {
+    None: undefined,
+    Icon: 'Icon'
+  }, undefined);
+  var selectChildren = select('children', {
+    None: undefined,
+    Text: 'Click Here'
+  }, 'Click Here');
   return React.createElement(Button, {
+    icon: selectIcon === 'Icon' ? React.createElement(Icon, null) : undefined,
     isDisabled: boolean('isDisabled', false),
     isLoading: boolean('isLoading', false),
     onClick: action('onClick called'),
-    showRadar: boolean('showRadar', false)
-  }, "Click Here");
+    showRadar: boolean('showRadar', false),
+    size: select('size', {
+      None: undefined,
+      Large: 'large'
+    }, undefined)
+  }, selectChildren ? 'Click Here' : null);
 };
 export var loading = function loading() {
   return React.createElement(Button, {
@@ -26,8 +45,49 @@ export var withRadar = function withRadar() {
     showRadar: true
   }, "Click Here");
 };
+export var large = function large() {
+  return React.createElement(Button, {
+    size: "large"
+  }, "Click Here");
+};
+export var iconButton = function iconButton() {
+  return React.createElement(Button, {
+    icon: React.createElement(Icon2, {
+      title: "Options"
+    }),
+    size: "large"
+  });
+};
+export var iconAndTextButton = function iconAndTextButton() {
+  return React.createElement(Button, {
+    icon: React.createElement(Icon, null),
+    size: "large"
+  }, "Click Here");
+};
+export var fixingMargins = function fixingMargins() {
+  return React.createElement(React.Fragment, null, React.createElement(InlineNotice, {
+    type: "error",
+    title: "Note"
+  }, "The PlainButton variant has a ", React.createElement("b", null, "margin of 0"), " and needs special handling due to how the margin is defined for ", React.createElement("b", null, "hover/active states"), ".", React.createElement("br", null), " The methods shown below will cause problems for PlainButton. See PlainButton docs for details."), React.createElement("p", null, "By default there are 5px margins on all sides of the Button and PrimaryButton components."), React.createElement("p", {
+    style: {
+      backgroundColor: vars.bdlGray10,
+      display: 'inline-block'
+    }
+  }, React.createElement(Button, null, "Cancel"), React.createElement(PrimaryButton, null, "Action")), React.createElement("p", null, "A quick fix to remove the margins is to add the ", React.createElement("code", null, "man"), " (margin-all-none) or ", React.createElement("code", null, "mrn"), "/", React.createElement("code", null, "mln"), "/", React.createElement("code", null, "mhn"), "/", React.createElement("code", null, "mvn"), " (right/left/horizontal/vertical) utility classes."), React.createElement("p", {
+    style: {
+      backgroundColor: vars.bdlGray10,
+      display: 'inline-block'
+    }
+  }, React.createElement(Button, {
+    className: "mln"
+  }, "Cancel (mln)"), React.createElement(Button, {
+    className: "mhn"
+  }, "Other (mhn)"), React.createElement(PrimaryButton, {
+    className: "mrn"
+  }, "Action (mrn)")), React.createElement("p", null, "Alternately, you can create a CSS class and customize as needed.", React.createElement("pre", null, React.createElement("code", null, "\n        .bdl-SpecialButton {\n            margin: 0 $bdl-grid-unit;\n        }\n                    "))));
+};
 export default {
-  title: 'Components|Button',
+  title: 'Components|Buttons/Button',
   component: Button,
   parameters: {
     notes: notes

package/es/components/button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/Button.stories.tsx"],"names":["React","action","boolean","Button","notes","regular","loading","disabled","withRadar","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,MAAD;AACI,IAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf,CADvB;AAEI,IAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,IAAA,OAAO,EAAED,MAAM,CAAC,gBAAD,CAHnB;AAII,IAAA,SAAS,EAAEC,OAAO,CAAC,WAAD,EAAc,KAAd;AAJtB,kBADmB;AAAA,CAAhB;AAWP,OAAO,IAAMI,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,SAAS;AAAjB,kBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,UAAU;AAAlB,kBAAN;AAAA,CAAjB;AAEP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,SAAS;AAAjB,kBAAN;AAAA,CAAlB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAEP,MAFA;AAGXQ,EAAAA,UAAU,EAAE;AACRP,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Button from './Button';\nimport notes from './Button.stories.md';\n\nexport const regular = () => (\n    <Button\n        isDisabled={boolean('isDisabled', false)}\n        isLoading={boolean('isLoading', false)}\n        onClick={action('onClick called')}\n        showRadar={boolean('showRadar', false)}\n    >\n        Click Here\n    </Button>\n);\n\nexport const loading = () => <Button isLoading>Click Here</Button>;\n\nexport const disabled = () => <Button isDisabled>Click Here</Button>;\n\nexport const withRadar = () => <Button showRadar>Click Here</Button>;\n\nexport default {\n    title: 'Components|Button',\n    component: Button,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Button.stories.js"}
+{"version":3,"sources":["../../../src/components/button/Button.stories.tsx"],"names":["React","action","boolean","select","vars","PrimaryButton","Icon","Icon2","InlineNotice","Button","notes","regular","selectIcon","None","undefined","selectChildren","Text","Large","loading","disabled","withRadar","large","iconButton","iconAndTextButton","fixingMargins","backgroundColor","bdlGray10","display","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,EAAkBC,MAAlB,QAAgC,wBAAhC;AAEA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AAEA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,kCAAlB,C,CACA;;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AACzB,MAAMC,UAAU,GAAGT,MAAM,CAAC,MAAD,EAAS;AAAEU,IAAAA,IAAI,EAAEC,SAAR;AAAmBR,IAAAA,IAAI,EAAE;AAAzB,GAAT,EAA4CQ,SAA5C,CAAzB;AACA,MAAMC,cAAc,GAAGZ,MAAM,CAAC,UAAD,EAAa;AAAEU,IAAAA,IAAI,EAAEC,SAAR;AAAmBE,IAAAA,IAAI,EAAE;AAAzB,GAAb,EAAsD,YAAtD,CAA7B;AACA,SACI,oBAAC,MAAD;AACI,IAAA,IAAI,EAAEJ,UAAU,KAAK,MAAf,GAAwB,oBAAC,IAAD,OAAxB,GAAmCE,SAD7C;AAEI,IAAA,UAAU,EAAEZ,OAAO,CAAC,YAAD,EAAe,KAAf,CAFvB;AAGI,IAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAHtB;AAII,IAAA,OAAO,EAAED,MAAM,CAAC,gBAAD,CAJnB;AAKI,IAAA,SAAS,EAAEC,OAAO,CAAC,WAAD,EAAc,KAAd,CALtB;AAMI,IAAA,IAAI,EAAEC,MAAM,CAAC,MAAD,EAAS;AAAEU,MAAAA,IAAI,EAAEC,SAAR;AAAmBG,MAAAA,KAAK,EAAE;AAA1B,KAAT,EAA8CH,SAA9C;AANhB,KAQKC,cAAc,GAAG,YAAH,GAAkB,IARrC,CADJ;AAYH,CAfM;AAiBP,OAAO,IAAMG,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,SAAS;AAAjB,kBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,UAAU;AAAlB,kBAAN;AAAA,CAAjB;AAEP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,SAAS;AAAjB,kBAAN;AAAA,CAAlB;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,kBAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAM,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE,oBAAC,KAAD;AAAO,MAAA,KAAK,EAAC;AAAb,MAAd;AAAyC,IAAA,IAAI,EAAC;AAA9C,IAAN;AAAA,CAAnB;AAEP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,SAC7B,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE,oBAAC,IAAD,OAAd;AAAwB,IAAA,IAAI,EAAC;AAA7B,kBAD6B;AAAA,CAA1B;AAMP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SACzB,0CACI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,OAAnB;AAA2B,IAAA,KAAK,EAAC;AAAjC,uCACkC,6CADlC,uEAEQ,qDAFR,OAGI,+BAHJ,oGADJ,EAMI,2HANJ,EAOI;AAAG,IAAA,KAAK,EAAE;AAAEC,MAAAA,eAAe,EAAErB,IAAI,CAACsB,SAAxB;AAAmCC,MAAAA,OAAO,EAAE;AAA5C;AAAV,KACI,oBAAC,MAAD,iBADJ,EAEI,oBAAC,aAAD,iBAFJ,CAPJ,EAWI,mFACoD,wCADpD,4BAC0F,wCAD1F,OAEI,wCAFJ,OAEqB,wCAFrB,OAEsC,wCAFtC,uDAXJ,EAeI;AAAG,IAAA,KAAK,EAAE;AAAEF,MAAAA,eAAe,EAAErB,IAAI,CAACsB,SAAxB;AAAmCC,MAAAA,OAAO,EAAE;AAA5C;AAAV,KACI,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,oBADJ,EAEI,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,mBAFJ,EAGI,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAC;AAAzB,oBAHJ,CAfJ,EAoBI,mGAEI,iCACI,2IADJ,CAFJ,CApBJ,CADyB;AAAA,CAAtB;AAoCP,eAAe;AACXC,EAAAA,KAAK,EAAE,2BADI;AAEXC,EAAAA,SAAS,EAAEpB,MAFA;AAGXqB,EAAAA,UAAU,EAAE;AACRpB,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean, select } from '@storybook/addon-knobs';\n\nimport * as vars from '../../styles/variables';\n\nimport PrimaryButton from '../primary-button';\nimport Icon from '../../icon/line/Plus16';\nimport Icon2 from '../../icons/general/IconEllipsis';\n// @ts-ignore flow import\nimport InlineNotice from '../inline-notice';\n\nimport Button from './Button';\nimport notes from './Button.stories.md';\n\nexport const regular = () => {\n    const selectIcon = select('icon', { None: undefined, Icon: 'Icon' }, undefined);\n    const selectChildren = select('children', { None: undefined, Text: 'Click Here' }, 'Click Here');\n    return (\n        <Button\n            icon={selectIcon === 'Icon' ? <Icon /> : undefined}\n            isDisabled={boolean('isDisabled', false)}\n            isLoading={boolean('isLoading', false)}\n            onClick={action('onClick called')}\n            showRadar={boolean('showRadar', false)}\n            size={select('size', { None: undefined, Large: 'large' }, undefined)}\n        >\n            {selectChildren ? 'Click Here' : null}\n        </Button>\n    );\n};\n\nexport const loading = () => <Button isLoading>Click Here</Button>;\n\nexport const disabled = () => <Button isDisabled>Click Here</Button>;\n\nexport const withRadar = () => <Button showRadar>Click Here</Button>;\n\nexport const large = () => <Button size=\"large\">Click Here</Button>;\n\nexport const iconButton = () => <Button icon={<Icon2 title=\"Options\" />} size=\"large\" />;\n\nexport const iconAndTextButton = () => (\n    <Button icon={<Icon />} size=\"large\">\n        Click Here\n    </Button>\n);\n\nexport const fixingMargins = () => (\n    <>\n        <InlineNotice type=\"error\" title=\"Note\">\n            The PlainButton variant has a <b>margin of 0</b> and needs special handling due to how the margin is defined\n            for <b>hover/active states</b>.\n            <br /> The methods shown below will cause problems for PlainButton. See PlainButton docs for details.\n        </InlineNotice>\n        <p>By default there are 5px margins on all sides of the Button and PrimaryButton components.</p>\n        <p style={{ backgroundColor: vars.bdlGray10, display: 'inline-block' }}>\n            <Button>Cancel</Button>\n            <PrimaryButton>Action</PrimaryButton>\n        </p>\n        <p>\n            A quick fix to remove the margins is to add the <code>man</code> (margin-all-none) or <code>mrn</code>/\n            <code>mln</code>/<code>mhn</code>/<code>mvn</code> (right/left/horizontal/vertical) utility classes.\n        </p>\n        <p style={{ backgroundColor: vars.bdlGray10, display: 'inline-block' }}>\n            <Button className=\"mln\">Cancel (mln)</Button>\n            <Button className=\"mhn\">Other (mhn)</Button>\n            <PrimaryButton className=\"mrn\">Action (mrn)</PrimaryButton>\n        </p>\n        <p>\n            Alternately, you can create a CSS class and customize as needed.\n            <pre>\n                <code>\n                    {`\n        .bdl-SpecialButton {\n            margin: 0 $bdl-grid-unit;\n        }\n                    `}\n                </code>\n            </pre>\n        </p>\n    </>\n);\n\nexport default {\n    title: 'Components|Buttons/Button',\n    component: Button,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Button.stories.js"}

package/es/components/button-group/ButtonGroup.scss

@@ -15,7 +15,7 @@
             margin-left: 0;
             padding-right: 11px;
             padding-left: 11px;
-            border-radius: 0 4px 4px 0;
+            border-radius: 0 $bdl-border-radius-size-med $bdl-border-radius-size-med 0;
 
             &.btn-primary {
                 border-left-color: darken($primary-color, 10%);
@@ -65,13 +65,13 @@
         }
 
         > .btn:first-child {
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
+            border-top-left-radius: $bdl-border-radius-size-med;
+            border-bottom-left-radius: $bdl-border-radius-size-med;
         }
 
         > .btn:last-child {
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
+            border-top-right-radius: $bdl-border-radius-size-med;
+            border-bottom-right-radius: $bdl-border-radius-size-med;
         }
 
         > .btn.is-selected {

package/es/components/button-group/ButtonGroup.stories.js

@@ -14,7 +14,7 @@ export var disabled = function disabled() {
   }, React.createElement(Button, null, "Add"), React.createElement(Button, null, "Update"), React.createElement(Button, null, "Remove"));
 };
 export default {
-  title: 'Components|ButtonGroup',
+  title: 'Components|Buttons/ButtonGroup',
   component: ButtonGroup,
   parameters: {
     notes: notes

package/es/components/button-group/ButtonGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button-group/ButtonGroup.stories.tsx"],"names":["React","boolean","Button","ButtonGroup","notes","regular","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,WAAD;AAAa,IAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,KAAf;AAAhC,KACI,oBAAC,MAAD,cADJ,EAEI,oBAAC,MAAD,iBAFJ,EAGI,oBAAC,MAAD,iBAHJ,CADmB;AAAA,CAAhB;AAQP,OAAO,IAAMK,QAAQ,GAAG,SAAXA,QAAW;AAAA,SACpB,oBAAC,WAAD;AAAa,IAAA,UAAU;AAAvB,KACI,oBAAC,MAAD,cADJ,EAEI,oBAAC,MAAD,iBAFJ,EAGI,oBAAC,MAAD,iBAHJ,CADoB;AAAA,CAAjB;AAQP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEL,WAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Button from '../button/Button';\nimport ButtonGroup from './ButtonGroup';\nimport notes from './ButtonGroup.stories.md';\n\nexport const regular = () => (\n    <ButtonGroup isDisabled={boolean('isDisabled', false)}>\n        <Button>Add</Button>\n        <Button>Update</Button>\n        <Button>Remove</Button>\n    </ButtonGroup>\n);\n\nexport const disabled = () => (\n    <ButtonGroup isDisabled>\n        <Button>Add</Button>\n        <Button>Update</Button>\n        <Button>Remove</Button>\n    </ButtonGroup>\n);\n\nexport default {\n    title: 'Components|ButtonGroup',\n    component: ButtonGroup,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"ButtonGroup.stories.js"}
+{"version":3,"sources":["../../../src/components/button-group/ButtonGroup.stories.tsx"],"names":["React","boolean","Button","ButtonGroup","notes","regular","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,WAAD;AAAa,IAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,KAAf;AAAhC,KACI,oBAAC,MAAD,cADJ,EAEI,oBAAC,MAAD,iBAFJ,EAGI,oBAAC,MAAD,iBAHJ,CADmB;AAAA,CAAhB;AAQP,OAAO,IAAMK,QAAQ,GAAG,SAAXA,QAAW;AAAA,SACpB,oBAAC,WAAD;AAAa,IAAA,UAAU;AAAvB,KACI,oBAAC,MAAD,cADJ,EAEI,oBAAC,MAAD,iBAFJ,EAGI,oBAAC,MAAD,iBAHJ,CADoB;AAAA,CAAjB;AAQP,eAAe;AACXC,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEL,WAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Button from '../button/Button';\nimport ButtonGroup from './ButtonGroup';\nimport notes from './ButtonGroup.stories.md';\n\nexport const regular = () => (\n    <ButtonGroup isDisabled={boolean('isDisabled', false)}>\n        <Button>Add</Button>\n        <Button>Update</Button>\n        <Button>Remove</Button>\n    </ButtonGroup>\n);\n\nexport const disabled = () => (\n    <ButtonGroup isDisabled>\n        <Button>Add</Button>\n        <Button>Update</Button>\n        <Button>Remove</Button>\n    </ButtonGroup>\n);\n\nexport default {\n    title: 'Components|Buttons/ButtonGroup',\n    component: ButtonGroup,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"ButtonGroup.stories.js"}

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

@@ -15,6 +15,7 @@
     background: $white;
     border: 1px solid $bdl-gray-30;
     border-bottom-color: $bdl-gray-50;
+    border-radius: $bdl-border-radius-size-med;
 
     &.is-hidden {
         display: none;
@@ -188,7 +189,7 @@
     color: $white;
     font-weight: bold;
     background-color: $primary-color;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
     cursor: pointer;
 }
 

package/es/components/draft-js-editor/DraftJSEditor.scss

@@ -10,7 +10,7 @@
     width: 262px;
     padding: 8px 10px;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 }
 
 .draft-js-editor {

package/es/components/error-mask/ErrorMask.scss

@@ -11,7 +11,7 @@
     padding: 40px;
     overflow: hidden;
     border: 1px dashed $bdl-gray-50;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
 
     .error-mask-sad-cloud {
         margin-bottom: 20px;

package/es/components/flyout/Flyout.scss

@@ -12,7 +12,7 @@
 
     .overlay {
         padding: 15px;
-        border-radius: $bdl-border-radius-size;
+        border-radius: $bdl-border-radius-size-med;
     }
 
     &.flyout-overlay-target-attached-left,

package/es/components/footer-indicator/FooterIndicator.scss

@@ -8,7 +8,7 @@
     height: 32px;
     margin: 0 15px;
     background: $bdl-gray-80;
-    border-radius: 4px 4px 0 0;
+    border-radius: $bdl-border-radius-size $bdl-border-radius-size 0 0;
 }
 
 .bdl-FooterIndicator-content {

package/es/components/form-elements/draft-js-mention-selector/MentionSelector.scss

@@ -16,9 +16,18 @@
         position: absolute;
         z-index: 90;
         width: 100%;
-        padding: 8px;
+        margin-top: $bdl-grid-unit * 2;
+        padding: $bdl-grid-unit * 2;
         background: $white;
         border: 1px solid $bdl-gray-30;
+        border-radius: $bdl-border-radius-size-med;
         box-shadow: 0 2px 6px 0 fade-out($black, .9);
     }
+
+    // Normally .bdl-SelectorDropdown > .text-input-container has a bottom margin
+    // but the custom text box (DraftJSEditor) doesn't have one.
+    // Add spacing above dropdown wrapper here instead:
+    .overlay {
+        margin-top: $bdl-grid-unit * 2;
+    }
 }

package/es/components/guide-tooltip/GuideTooltip.js

@@ -19,6 +19,7 @@ function GuideTooltip(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       icon = _ref.icon,
+      image = _ref.image,
       _ref$isShown = _ref.isShown,
       isShown = _ref$isShown === void 0 ? true : _ref$isShown,
       primaryButtonProps = _ref.primaryButtonProps,
@@ -27,7 +28,7 @@ function GuideTooltip(_ref) {
       _ref$showCloseButton = _ref.showCloseButton,
       showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
       title = _ref.title,
-      rest = _objectWithoutProperties(_ref, ["body", "children", "className", "icon", "isShown", "primaryButtonProps", "steps", "secondaryButtonProps", "showCloseButton", "title"]);
+      rest = _objectWithoutProperties(_ref, ["body", "children", "className", "icon", "image", "isShown", "primaryButtonProps", "steps", "secondaryButtonProps", "showCloseButton", "title"]);
 
   return React.createElement(Tooltip, _extends({}, rest, {
     className: "bdl-GuideTooltip ".concat(className),
@@ -39,7 +40,9 @@ function GuideTooltip(_ref) {
       className: "bdl-GuideTooltip-right"
     }, title && React.createElement("div", {
       className: "bdl-GuideTooltip-title"
-    }, title), React.createElement("div", {
+    }, title), !icon && image && React.createElement("div", {
+      className: "bdl-GuideTooltip-image"
+    }, image), React.createElement("div", {
       className: "bdl-GuideTooltip-body"
     }, body), (secondaryButtonProps || primaryButtonProps || steps) && React.createElement("div", {
       className: "bdl-GuideTooltip-bottom"

package/es/components/guide-tooltip/GuideTooltip.js.flow

@@ -21,6 +21,7 @@ type Props = {|
     ...$Exact<TooltipProps>,
     body: React.Node,
     icon?: React.Node,
+    image?: React.Node,
     primaryButtonProps?: React.ElementConfig<typeof Button>,
     secondaryButtonProps?: React.ElementConfig<typeof Button>,
     steps?: [number, number],
@@ -32,6 +33,7 @@ function GuideTooltip({
     children,
     className = '',
     icon,
+    image,
     isShown = true,
     primaryButtonProps,
     steps,
@@ -51,6 +53,7 @@ function GuideTooltip({
                     {icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}
                     <div className="bdl-GuideTooltip-right">
                         {title && <div className="bdl-GuideTooltip-title">{title}</div>}
+                        {!icon && image && <div className="bdl-GuideTooltip-image">{image}</div>}
                         <div className="bdl-GuideTooltip-body">{body}</div>
                         {(secondaryButtonProps || primaryButtonProps || steps) && (
                             <div className="bdl-GuideTooltip-bottom">

package/es/components/guide-tooltip/GuideTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/guide-tooltip/GuideTooltip.tsx"],"names":["React","FormattedMessage","classNames","Tooltip","TooltipTheme","Button","messages","GuideTooltip","body","children","className","icon","isShown","primaryButtonProps","steps","secondaryButtonProps","showCloseButton","title","rest","navigation","currentStepIndex","totalNumSteps","CALLOUT"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,OAAP,IAAkBC,YAAlB,QAAsC,YAAtC;AACA,OAAOC,MAAP,MAAmB,WAAnB,C,CACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,qBAAP;;AAeA,SAASC,YAAT,OAYU;AAAA,MAXNC,IAWM,QAXNA,IAWM;AAAA,MAVNC,QAUM,QAVNA,QAUM;AAAA,4BATNC,SASM;AAAA,MATNA,SASM,+BATM,EASN;AAAA,MARNC,IAQM,QARNA,IAQM;AAAA,0BAPNC,OAOM;AAAA,MAPNA,OAOM,6BAPI,IAOJ;AAAA,MANNC,kBAMM,QANNA,kBAMM;AAAA,MALNC,KAKM,QALNA,KAKM;AAAA,MAJNC,oBAIM,QAJNA,oBAIM;AAAA,kCAHNC,eAGM;AAAA,MAHNA,eAGM,qCAHY,IAGZ;AAAA,MAFNC,KAEM,QAFNA,KAEM;AAAA,MADHC,IACG;;AACN,SACI,oBAAC,OAAD,eACQA,IADR;AAEI,IAAA,SAAS,6BAAsBR,SAAtB,CAFb;AAGI,IAAA,OAAO,EAAEE,OAHb;AAII,IAAA,eAAe,EAAEI,eAJrB;AAKI,IAAA,IAAI,EACA,0CACKL,IAAI,IAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAwCA,IAAxC,CADb,EAEI;AAAK,MAAA,SAAS,EAAC;AAAf,OACKM,KAAK,IAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAyCA,KAAzC,CADd,EAEI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAwCT,IAAxC,CAFJ,EAGK,CAACO,oBAAoB,IAAIF,kBAAxB,IAA8CC,KAA/C,KACG;AAAK,MAAA,SAAS,EAAC;AAAf,OACK,CAACC,oBAAoB,IAAIF,kBAAzB,KACG;AAAK,MAAA,SAAS,EAAC;AAAf,OACKE,oBAAoB,IACjB,oBAAC,MAAD,eACQA,oBADR;AAEI,MAAA,SAAS,EAAEb,UAAU,CACjB,iCADiB,EAEjBa,oBAAoB,CAACL,SAFJ;AAFzB,OAFR,EAUKG,kBAAkB,IACf,oBAAC,MAAD,eACQA,kBADR;AAEI,MAAA,SAAS,EAAEX,UAAU,CACjB,6BADiB,EAEjBW,kBAAkB,CAACH,SAFF;AAFzB,OAXR,CAFR,EAuBKI,KAAK,IACF;AAAK,MAAA,SAAS,EAAC;AAAf,OACI,oBAAC,gBAAD,eACQR,QAAQ,CAACa,UADjB;AAEI,MAAA,MAAM,EAAE;AAAEC,QAAAA,gBAAgB,EAAEN,KAAK,CAAC,CAAD,CAAzB;AAA8BO,QAAAA,aAAa,EAAEP,KAAK,CAAC,CAAD;AAAlD;AAFZ,OADJ,CAxBR,CAJR,CAFJ,CANR;AAgDI,IAAA,KAAK,EAAEV,YAAY,CAACkB;AAhDxB,MAkDKb,QAlDL,CADJ;AAsDH;;AAED,eAAeF,YAAf","sourcesContent":["import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport classNames from 'classnames';\n\nimport Tooltip, { TooltipTheme } from '../tooltip';\nimport Button from '../button';\n// @ts-ignore flow import\nimport messages from './messages';\n\nimport './GuideTooltip.scss';\n\ntype TooltipProps = Omit<JSX.LibraryManagedAttributes<typeof Tooltip, Tooltip['props']>, 'text' | 'theme'>;\n\ntype Props = TooltipProps & {\n    body: React.ReactNode;\n    title?: React.ReactNode;\n    /** 32px x 32px */\n    icon?: React.ReactNode;\n    /** displays guide progress e.g. 1 of 4 */\n    steps?: [number, number];\n    primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;\n    secondaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;\n};\n\nfunction GuideTooltip({\n    body,\n    children,\n    className = '',\n    icon,\n    isShown = true,\n    primaryButtonProps,\n    steps,\n    secondaryButtonProps,\n    showCloseButton = true,\n    title,\n    ...rest\n}: Props) {\n    return (\n        <Tooltip\n            {...rest}\n            className={`bdl-GuideTooltip ${className}`}\n            isShown={isShown}\n            showCloseButton={showCloseButton}\n            text={\n                <>\n                    {icon && <div className=\"bdl-GuideTooltip-icon\">{icon}</div>}\n                    <div className=\"bdl-GuideTooltip-right\">\n                        {title && <div className=\"bdl-GuideTooltip-title\">{title}</div>}\n                        <div className=\"bdl-GuideTooltip-body\">{body}</div>\n                        {(secondaryButtonProps || primaryButtonProps || steps) && (\n                            <div className=\"bdl-GuideTooltip-bottom\">\n                                {(secondaryButtonProps || primaryButtonProps) && (\n                                    <div className=\"bdl-GuideTooltip-navigation\">\n                                        {secondaryButtonProps && (\n                                            <Button\n                                                {...secondaryButtonProps}\n                                                className={classNames(\n                                                    'bdl-GuideTooltip-previousButton',\n                                                    secondaryButtonProps.className,\n                                                )}\n                                            />\n                                        )}\n                                        {primaryButtonProps && (\n                                            <Button\n                                                {...primaryButtonProps}\n                                                className={classNames(\n                                                    'bdl-GuideTooltip-nextButton',\n                                                    primaryButtonProps.className,\n                                                )}\n                                            />\n                                        )}\n                                    </div>\n                                )}\n                                {steps && (\n                                    <div className=\"bdl-GuideTooltip-steps\">\n                                        <FormattedMessage\n                                            {...messages.navigation}\n                                            values={{ currentStepIndex: steps[0], totalNumSteps: steps[1] }}\n                                        />\n                                    </div>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                </>\n            }\n            theme={TooltipTheme.CALLOUT}\n        >\n            {children}\n        </Tooltip>\n    );\n}\n\nexport default GuideTooltip;\n"],"file":"GuideTooltip.js"}
+{"version":3,"sources":["../../../src/components/guide-tooltip/GuideTooltip.tsx"],"names":["React","FormattedMessage","classNames","Tooltip","TooltipTheme","Button","messages","GuideTooltip","body","children","className","icon","image","isShown","primaryButtonProps","steps","secondaryButtonProps","showCloseButton","title","rest","navigation","currentStepIndex","totalNumSteps","CALLOUT"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,OAAP,IAAkBC,YAAlB,QAAsC,YAAtC;AACA,OAAOC,MAAP,MAAmB,WAAnB,C,CACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,qBAAP;;AAiBA,SAASC,YAAT,OAaU;AAAA,MAZNC,IAYM,QAZNA,IAYM;AAAA,MAXNC,QAWM,QAXNA,QAWM;AAAA,4BAVNC,SAUM;AAAA,MAVNA,SAUM,+BAVM,EAUN;AAAA,MATNC,IASM,QATNA,IASM;AAAA,MARNC,KAQM,QARNA,KAQM;AAAA,0BAPNC,OAOM;AAAA,MAPNA,OAOM,6BAPI,IAOJ;AAAA,MANNC,kBAMM,QANNA,kBAMM;AAAA,MALNC,KAKM,QALNA,KAKM;AAAA,MAJNC,oBAIM,QAJNA,oBAIM;AAAA,kCAHNC,eAGM;AAAA,MAHNA,eAGM,qCAHY,IAGZ;AAAA,MAFNC,KAEM,QAFNA,KAEM;AAAA,MADHC,IACG;;AACN,SACI,oBAAC,OAAD,eACQA,IADR;AAEI,IAAA,SAAS,6BAAsBT,SAAtB,CAFb;AAGI,IAAA,OAAO,EAAEG,OAHb;AAII,IAAA,eAAe,EAAEI,eAJrB;AAKI,IAAA,IAAI,EACA,0CACKN,IAAI,IAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAwCA,IAAxC,CADb,EAEI;AAAK,MAAA,SAAS,EAAC;AAAf,OACKO,KAAK,IAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAyCA,KAAzC,CADd,EAEK,CAACP,IAAD,IAASC,KAAT,IAAkB;AAAK,MAAA,SAAS,EAAC;AAAf,OAAyCA,KAAzC,CAFvB,EAGI;AAAK,MAAA,SAAS,EAAC;AAAf,OAAwCJ,IAAxC,CAHJ,EAIK,CAACQ,oBAAoB,IAAIF,kBAAxB,IAA8CC,KAA/C,KACG;AAAK,MAAA,SAAS,EAAC;AAAf,OACK,CAACC,oBAAoB,IAAIF,kBAAzB,KACG;AAAK,MAAA,SAAS,EAAC;AAAf,OACKE,oBAAoB,IACjB,oBAAC,MAAD,eACQA,oBADR;AAEI,MAAA,SAAS,EAAEd,UAAU,CACjB,iCADiB,EAEjBc,oBAAoB,CAACN,SAFJ;AAFzB,OAFR,EAUKI,kBAAkB,IACf,oBAAC,MAAD,eACQA,kBADR;AAEI,MAAA,SAAS,EAAEZ,UAAU,CACjB,6BADiB,EAEjBY,kBAAkB,CAACJ,SAFF;AAFzB,OAXR,CAFR,EAuBKK,KAAK,IACF;AAAK,MAAA,SAAS,EAAC;AAAf,OACI,oBAAC,gBAAD,eACQT,QAAQ,CAACc,UADjB;AAEI,MAAA,MAAM,EAAE;AAAEC,QAAAA,gBAAgB,EAAEN,KAAK,CAAC,CAAD,CAAzB;AAA8BO,QAAAA,aAAa,EAAEP,KAAK,CAAC,CAAD;AAAlD;AAFZ,OADJ,CAxBR,CALR,CAFJ,CANR;AAiDI,IAAA,KAAK,EAAEX,YAAY,CAACmB;AAjDxB,MAmDKd,QAnDL,CADJ;AAuDH;;AAED,eAAeF,YAAf","sourcesContent":["import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport classNames from 'classnames';\n\nimport Tooltip, { TooltipTheme } from '../tooltip';\nimport Button from '../button';\n// @ts-ignore flow import\nimport messages from './messages';\n\nimport './GuideTooltip.scss';\n\ntype TooltipProps = Omit<JSX.LibraryManagedAttributes<typeof Tooltip, Tooltip['props']>, 'text' | 'theme'>;\n\ntype Props = TooltipProps & {\n    body: React.ReactNode;\n    title?: React.ReactNode;\n    /** 32px x 32px */\n    icon?: React.ReactNode;\n    /** A React component representing the image */\n    image?: React.ReactNode;\n    /** displays guide progress e.g. 1 of 4 */\n    steps?: [number, number];\n    primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;\n    secondaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;\n};\n\nfunction GuideTooltip({\n    body,\n    children,\n    className = '',\n    icon,\n    image,\n    isShown = true,\n    primaryButtonProps,\n    steps,\n    secondaryButtonProps,\n    showCloseButton = true,\n    title,\n    ...rest\n}: Props) {\n    return (\n        <Tooltip\n            {...rest}\n            className={`bdl-GuideTooltip ${className}`}\n            isShown={isShown}\n            showCloseButton={showCloseButton}\n            text={\n                <>\n                    {icon && <div className=\"bdl-GuideTooltip-icon\">{icon}</div>}\n                    <div className=\"bdl-GuideTooltip-right\">\n                        {title && <div className=\"bdl-GuideTooltip-title\">{title}</div>}\n                        {!icon && image && <div className=\"bdl-GuideTooltip-image\">{image}</div>}\n                        <div className=\"bdl-GuideTooltip-body\">{body}</div>\n                        {(secondaryButtonProps || primaryButtonProps || steps) && (\n                            <div className=\"bdl-GuideTooltip-bottom\">\n                                {(secondaryButtonProps || primaryButtonProps) && (\n                                    <div className=\"bdl-GuideTooltip-navigation\">\n                                        {secondaryButtonProps && (\n                                            <Button\n                                                {...secondaryButtonProps}\n                                                className={classNames(\n                                                    'bdl-GuideTooltip-previousButton',\n                                                    secondaryButtonProps.className,\n                                                )}\n                                            />\n                                        )}\n                                        {primaryButtonProps && (\n                                            <Button\n                                                {...primaryButtonProps}\n                                                className={classNames(\n                                                    'bdl-GuideTooltip-nextButton',\n                                                    primaryButtonProps.className,\n                                                )}\n                                            />\n                                        )}\n                                    </div>\n                                )}\n                                {steps && (\n                                    <div className=\"bdl-GuideTooltip-steps\">\n                                        <FormattedMessage\n                                            {...messages.navigation}\n                                            values={{ currentStepIndex: steps[0], totalNumSteps: steps[1] }}\n                                        />\n                                    </div>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                </>\n            }\n            theme={TooltipTheme.CALLOUT}\n        >\n            {children}\n        </Tooltip>\n    );\n}\n\nexport default GuideTooltip;\n"],"file":"GuideTooltip.js"}

package/es/components/guide-tooltip/GuideTooltip.scss

@@ -1,11 +1,13 @@
 @import '../../styles/variables';
 
+$bdl-guide-tooltip-max-width: 408px;
+
 .bdl-GuideTooltip {
     display: flex;
 }
 
 .bdl-GuideTooltip.bdl-Tooltip {
-    max-width: 408px;
+    max-width: $bdl-guide-tooltip-max-width;
     padding: ($bdl-grid-unit * 6) ($bdl-grid-unit * 12) ($bdl-grid-unit * 6) ($bdl-grid-unit * 6);
 }
 
@@ -21,6 +23,17 @@
     margin-right: ($bdl-grid-unit * 4);
 }
 
+.bdl-GuideTooltip-image {
+    margin-right: -($bdl-grid-unit * 6);
+    margin-left: -($bdl-grid-unit * 6);
+    padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;
+    text-align: center;
+
+    img {
+        max-width: $bdl-guide-tooltip-max-width;
+    }
+}
+
 .bdl-GuideTooltip-title {
     padding-bottom: ($bdl-grid-unit * 2);
     font-weight: bold;

package/es/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/es/components/link/LinkButton.js

@@ -5,15 +5,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
+import classNames from 'classnames';
 import LinkBase from './LinkBase';
 
 var LinkButton = function LinkButton(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutProperties(_ref, ["className"]);
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, ["className", "size"]);
 
   return React.createElement(LinkBase, _extends({
-    className: "btn ".concat(className)
+    className: classNames('btn', className, {
+      'bdl-btn--large': size === 'large'
+    })
   }, rest));
 };
 

package/es/components/link/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/link/LinkButton.tsx"],"names":["React","LinkBase","LinkButton","className","rest"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAwC,YAAxC;;AAOA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,MAAsBC,IAAtB;;AAAA,SACf,oBAAC,QAAD;AAAU,IAAA,SAAS,gBAASD,SAAT;AAAnB,KAA6CC,IAA7C,EADe;AAAA,CAAnB;;AAIA,eAAeF,UAAf","sourcesContent":["import * as React from 'react';\nimport LinkBase, { LinkBaseProps } from './LinkBase';\n\nexport interface LinkButtonProps extends LinkBaseProps {\n    children: React.ReactChild;\n    className?: string;\n}\n\nconst LinkButton = ({ className = '', ...rest }: LinkButtonProps) => (\n    <LinkBase className={`btn ${className}`} {...rest} />\n);\n\nexport default LinkButton;\n"],"file":"LinkButton.js"}
+{"version":3,"sources":["../../../src/components/link/LinkButton.tsx"],"names":["React","classNames","LinkBase","LinkButton","className","size","rest"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAwC,YAAxC;;AAQA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,MAAmBC,IAAnB,QAAmBA,IAAnB;AAAA,MAA4BC,IAA5B;;AAAA,SACf,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAEL,UAAU,CAAC,KAAD,EAAQG,SAAR,EAAmB;AAAE,wBAAkBC,IAAI,KAAK;AAA7B,KAAnB;AAA/B,KAA+FC,IAA/F,EADe;AAAA,CAAnB;;AAIA,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport LinkBase, { LinkBaseProps } from './LinkBase';\n\nexport interface LinkButtonProps extends LinkBaseProps {\n    children: React.ReactChild;\n    className?: string;\n    size?: 'large';\n}\n\nconst LinkButton = ({ className = '', size, ...rest }: LinkButtonProps) => (\n    <LinkBase className={classNames('btn', className, { 'bdl-btn--large': size === 'large' })} {...rest} />\n);\n\nexport default LinkButton;\n"],"file":"LinkButton.js"}

package/es/components/link/LinkPrimaryButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/link/LinkPrimaryButton.tsx"],"names":["React","LinkButton","LinkPrimaryButton","className","rest"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;;AAQA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,MAAsBC,IAAtB;;AAAA,SACtB,oBAAC,UAAD;AAAY,IAAA,SAAS,wBAAiBD,SAAjB;AAArB,KAAuDC,IAAvD,EADsB;AAAA,CAA1B;;AAIA,eAAeF,iBAAf","sourcesContent":["import * as React from 'react';\n\nimport LinkButton from './LinkButton';\nimport { LinkBaseProps } from './LinkBase';\n\nexport interface LinkPrimaryButtonProps extends LinkBaseProps {\n    children: React.ReactChild;\n    className?: string;\n}\n\nconst LinkPrimaryButton = ({ className = '', ...rest }: LinkPrimaryButtonProps) => (\n    <LinkButton className={`btn-primary ${className}`} {...rest} />\n);\n\nexport default LinkPrimaryButton;\n"],"file":"LinkPrimaryButton.js"}
+{"version":3,"sources":["../../../src/components/link/LinkPrimaryButton.tsx"],"names":["React","LinkButton","LinkPrimaryButton","className","rest"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAA4C,cAA5C;;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,MAAsBC,IAAtB;;AAAA,SACtB,oBAAC,UAAD;AAAY,IAAA,SAAS,wBAAiBD,SAAjB;AAArB,KAAuDC,IAAvD,EADsB;AAAA,CAA1B;;AAIA,eAAeF,iBAAf","sourcesContent":["import * as React from 'react';\n\nimport LinkButton, { LinkButtonProps } from './LinkButton';\n\nexport interface LinkPrimaryButtonProps extends LinkButtonProps {\n    className?: string;\n}\n\nconst LinkPrimaryButton = ({ className = '', ...rest }: LinkPrimaryButtonProps) => (\n    <LinkButton className={`btn-primary ${className}`} {...rest} />\n);\n\nexport default LinkPrimaryButton;\n"],"file":"LinkPrimaryButton.js"}

package/es/components/link/stories/LinkButton.stories.js

@@ -6,11 +6,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { BrowserRouter as Router, Link as RouterLink } from 'react-router-dom';
+import { select } from '@storybook/addon-knobs';
 import LinkButton from '../LinkButton';
 import notes from './LinkButton.stories.md';
 export var basic = function basic() {
   return React.createElement(LinkButton, {
-    href: "https://www.box.com/platform"
+    href: "https://www.box.com/platform",
+    size: select('size', {
+      None: undefined,
+      Large: 'large'
+    }, undefined)
+  }, "A link that looks like a Button");
+};
+export var large = function large() {
+  return React.createElement(LinkButton, {
+    href: "https://www.box.com/platform",
+    size: "large"
   }, "A link that looks like a Button");
 };
 export var withCustomComponent = function withCustomComponent() {

package/es/components/link/stories/LinkButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/link/stories/LinkButton.stories.tsx"],"names":["React","BrowserRouter","Router","Link","RouterLink","LinkButton","notes","basic","withCustomComponent","CustomRouterLink","href","children","rest","title","component","parameters"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAa,IAAIC,MAA1B,EAAkCC,IAAI,IAAIC,UAA1C,QAA0F,kBAA1F;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAC;AAAjB,uCAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACrC;AACA;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,QAASC,QAAT,QAASA,QAAT;AAAA,QAAsBC,IAAtB;;AAAA,WACrB,oBAAC,UAAD;AAAY,MAAA,EAAE,EAAEF;AAAhB,OAA0BE,IAA1B,GACKD,QADL,CADqB;AAAA,GAAzB;;AAMA,SACI,oBAAC,MAAD,QACI,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAC,GAAjB;AAAqB,IAAA,SAAS,EAAEF;AAAhC,cADJ,CADJ;AAOH,CAjBM;AAmBP,eAAe;AACXI,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAET,UAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\nimport LinkButton from '../LinkButton';\nimport notes from './LinkButton.stories.md';\n\nexport const basic = () => <LinkButton href=\"https://www.box.com/platform\">A link that looks like a Button</LinkButton>;\n\nexport const withCustomComponent = () => {\n    // You can pass a custom component to be used instead of the default \"a\" tag, like a React Router link:\n    // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\n    const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (\n        <RouterLink to={href} {...rest}>\n            {children}\n        </RouterLink>\n    );\n\n    return (\n        <Router>\n            <LinkButton href=\"/\" component={CustomRouterLink}>\n                A link\n            </LinkButton>\n        </Router>\n    );\n};\n\nexport default {\n    title: 'Components|Links/LinkButton',\n    component: LinkButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"LinkButton.stories.js"}
+{"version":3,"sources":["../../../../src/components/link/stories/LinkButton.stories.tsx"],"names":["React","BrowserRouter","Router","Link","RouterLink","select","LinkButton","notes","basic","None","undefined","Large","large","withCustomComponent","CustomRouterLink","href","children","rest","title","component","parameters"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAa,IAAIC,MAA1B,EAAkCC,IAAI,IAAIC,UAA1C,QAA0F,kBAA1F;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SACjB,oBAAC,UAAD;AACI,IAAA,IAAI,EAAC,8BADT;AAEI,IAAA,IAAI,EAAEH,MAAM,CAAC,MAAD,EAAS;AAAEI,MAAAA,IAAI,EAAEC,SAAR;AAAmBC,MAAAA,KAAK,EAAE;AAA1B,KAAT,EAA8CD,SAA9C;AAFhB,uCADiB;AAAA,CAAd;AASP,OAAO,IAAME,KAAK,GAAG,SAARA,KAAQ;AAAA,SACjB,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAC,8BAAjB;AAAgD,IAAA,IAAI,EAAC;AAArD,uCADiB;AAAA,CAAd;AAMP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACrC;AACA;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,QAASC,QAAT,QAASA,QAAT;AAAA,QAAsBC,IAAtB;;AAAA,WACrB,oBAAC,UAAD;AAAY,MAAA,EAAE,EAAEF;AAAhB,OAA0BE,IAA1B,GACKD,QADL,CADqB;AAAA,GAAzB;;AAMA,SACI,oBAAC,MAAD,QACI,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAC,GAAjB;AAAqB,IAAA,SAAS,EAAEF;AAAhC,cADJ,CADJ;AAOH,CAjBM;AAmBP,eAAe;AACXI,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAEb,UAFA;AAGXc,EAAAA,UAAU,EAAE;AACRb,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\nimport { select } from '@storybook/addon-knobs';\n\nimport LinkButton from '../LinkButton';\nimport notes from './LinkButton.stories.md';\n\nexport const basic = () => (\n    <LinkButton\n        href=\"https://www.box.com/platform\"\n        size={select('size', { None: undefined, Large: 'large' }, undefined)}\n    >\n        A link that looks like a Button\n    </LinkButton>\n);\n\nexport const large = () => (\n    <LinkButton href=\"https://www.box.com/platform\" size=\"large\">\n        A link that looks like a Button\n    </LinkButton>\n);\n\nexport const withCustomComponent = () => {\n    // You can pass a custom component to be used instead of the default \"a\" tag, like a React Router link:\n    // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\n    const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (\n        <RouterLink to={href} {...rest}>\n            {children}\n        </RouterLink>\n    );\n\n    return (\n        <Router>\n            <LinkButton href=\"/\" component={CustomRouterLink}>\n                A link\n            </LinkButton>\n        </Router>\n    );\n};\n\nexport default {\n    title: 'Components|Links/LinkButton',\n    component: LinkButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"LinkButton.stories.js"}

package/es/components/link/stories/LinkPrimaryButton.stories.js

@@ -6,11 +6,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { BrowserRouter as Router, Link as RouterLink } from 'react-router-dom';
+import { select } from '@storybook/addon-knobs';
 import LinkPrimaryButton from '../LinkPrimaryButton';
 import notes from './LinkPrimaryButton.stories.md';
 export var basic = function basic() {
   return React.createElement(LinkPrimaryButton, {
-    href: "https://www.box.com/platform"
+    href: "https://www.box.com/platform",
+    size: select('size', {
+      None: undefined,
+      Large: 'large'
+    }, undefined)
+  }, "A link that looks like a PrimaryButton");
+};
+export var large = function large() {
+  return React.createElement(LinkPrimaryButton, {
+    href: "https://www.box.com/platform",
+    size: "large"
   }, "A link that looks like a PrimaryButton");
 };
 export var withCustomComponent = function withCustomComponent() {

package/es/components/link/stories/LinkPrimaryButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/link/stories/LinkPrimaryButton.stories.tsx"],"names":["React","BrowserRouter","Router","Link","RouterLink","LinkPrimaryButton","notes","basic","withCustomComponent","CustomRouterLink","href","children","rest","title","component","parameters"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAa,IAAIC,MAA1B,EAAkCC,IAAI,IAAIC,UAA1C,QAA0F,kBAA1F;AAEA,OAAOC,iBAAP,MAA8B,sBAA9B;AACA,OAAOC,KAAP,MAAkB,gCAAlB;AAEA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SACjB,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,8CADiB;AAAA,CAAd;AAIP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACrC;AACA;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,QAASC,QAAT,QAASA,QAAT;AAAA,QAAsBC,IAAtB;;AAAA,WACrB,oBAAC,UAAD;AAAY,MAAA,EAAE,EAAEF;AAAhB,OAA0BE,IAA1B,GACKD,QADL,CADqB;AAAA,GAAzB;;AAMA,SACI,oBAAC,MAAD,QACI,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAEF;AAAvC,cADJ,CADJ;AAOH,CAjBM;AAmBP,eAAe;AACXI,EAAAA,KAAK,EAAE,oCADI;AAEXC,EAAAA,SAAS,EAAET,iBAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\nimport LinkPrimaryButton from '../LinkPrimaryButton';\nimport notes from './LinkPrimaryButton.stories.md';\n\nexport const basic = () => (\n    <LinkPrimaryButton href=\"https://www.box.com/platform\">A link that looks like a PrimaryButton</LinkPrimaryButton>\n);\n\nexport const withCustomComponent = () => {\n    // You can pass a custom component to be used instead of the default \"a\" tag, like a React Router link:\n    // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\n    const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (\n        <RouterLink to={href} {...rest}>\n            {children}\n        </RouterLink>\n    );\n\n    return (\n        <Router>\n            <LinkPrimaryButton href=\"/\" component={CustomRouterLink}>\n                A link\n            </LinkPrimaryButton>\n        </Router>\n    );\n};\n\nexport default {\n    title: 'Components|Links/LinkPrimaryButton',\n    component: LinkPrimaryButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"LinkPrimaryButton.stories.js"}
+{"version":3,"sources":["../../../../src/components/link/stories/LinkPrimaryButton.stories.tsx"],"names":["React","BrowserRouter","Router","Link","RouterLink","select","LinkPrimaryButton","notes","basic","None","undefined","Large","large","withCustomComponent","CustomRouterLink","href","children","rest","title","component","parameters"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAa,IAAIC,MAA1B,EAAkCC,IAAI,IAAIC,UAA1C,QAA0F,kBAA1F;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAEA,OAAOC,iBAAP,MAA8B,sBAA9B;AACA,OAAOC,KAAP,MAAkB,gCAAlB;AAEA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SACjB,oBAAC,iBAAD;AACI,IAAA,IAAI,EAAC,8BADT;AAEI,IAAA,IAAI,EAAEH,MAAM,CAAC,MAAD,EAAS;AAAEI,MAAAA,IAAI,EAAEC,SAAR;AAAmBC,MAAAA,KAAK,EAAE;AAA1B,KAAT,EAA8CD,SAA9C;AAFhB,8CADiB;AAAA,CAAd;AASP,OAAO,IAAME,KAAK,GAAG,SAARA,KAAQ;AAAA,SACjB,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC,8BAAxB;AAAuD,IAAA,IAAI,EAAC;AAA5D,8CADiB;AAAA,CAAd;AAMP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACrC;AACA;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,QAASC,QAAT,QAASA,QAAT;AAAA,QAAsBC,IAAtB;;AAAA,WACrB,oBAAC,UAAD;AAAY,MAAA,EAAE,EAAEF;AAAhB,OAA0BE,IAA1B,GACKD,QADL,CADqB;AAAA,GAAzB;;AAMA,SACI,oBAAC,MAAD,QACI,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAEF;AAAvC,cADJ,CADJ;AAOH,CAjBM;AAmBP,eAAe;AACXI,EAAAA,KAAK,EAAE,oCADI;AAEXC,EAAAA,SAAS,EAAEb,iBAFA;AAGXc,EAAAA,UAAU,EAAE;AACRb,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\nimport { select } from '@storybook/addon-knobs';\n\nimport LinkPrimaryButton from '../LinkPrimaryButton';\nimport notes from './LinkPrimaryButton.stories.md';\n\nexport const basic = () => (\n    <LinkPrimaryButton\n        href=\"https://www.box.com/platform\"\n        size={select('size', { None: undefined, Large: 'large' }, undefined)}\n    >\n        A link that looks like a PrimaryButton\n    </LinkPrimaryButton>\n);\n\nexport const large = () => (\n    <LinkPrimaryButton href=\"https://www.box.com/platform\" size=\"large\">\n        A link that looks like a PrimaryButton\n    </LinkPrimaryButton>\n);\n\nexport const withCustomComponent = () => {\n    // You can pass a custom component to be used instead of the default \"a\" tag, like a React Router link:\n    // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';\n\n    const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (\n        <RouterLink to={href} {...rest}>\n            {children}\n        </RouterLink>\n    );\n\n    return (\n        <Router>\n            <LinkPrimaryButton href=\"/\" component={CustomRouterLink}>\n                A link\n            </LinkPrimaryButton>\n        </Router>\n    );\n};\n\nexport default {\n    title: 'Components|Links/LinkPrimaryButton',\n    component: LinkPrimaryButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"LinkPrimaryButton.stories.js"}