@transferwise/components 45.5.1 → 45.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/build/es/no-polyfill/alert/Alert.js +1 -1
  2. package/build/es/no-polyfill/alert/Alert.story.js +1 -1
  3. package/build/es/no-polyfill/checkboxButton/CheckboxButton.story.js +2 -1
  4. package/build/es/no-polyfill/criticalBanner/CriticalCommsBanner.story.js +1 -1
  5. package/build/es/no-polyfill/emphasis/Emphasis.story.js +1 -0
  6. package/build/es/no-polyfill/markdown/Markdown.story.js +1 -0
  7. package/build/es/no-polyfill/processIndicator/ProcessIndicator.story.js +1 -0
  8. package/build/es/polyfill/alert/Alert.js +1 -1
  9. package/build/es/polyfill/alert/Alert.story.js +1 -1
  10. package/build/es/polyfill/checkboxButton/CheckboxButton.story.js +2 -1
  11. package/build/es/polyfill/criticalBanner/CriticalCommsBanner.story.js +1 -1
  12. package/build/es/polyfill/emphasis/Emphasis.story.js +1 -0
  13. package/build/es/polyfill/markdown/Markdown.story.js +1 -0
  14. package/build/es/polyfill/processIndicator/ProcessIndicator.story.js +1 -0
  15. package/build/main.css +1 -1
  16. package/build/styles/avatar/Avatar.css +1 -1
  17. package/build/styles/main.css +1 -1
  18. package/build/types/alert/Alert.d.ts +4 -0
  19. package/build/types/alert/Alert.story.d.ts +3 -0
  20. package/build/types/checkboxButton/CheckboxButton.story.d.ts +14 -4
  21. package/build/types/criticalBanner/CriticalCommsBanner.story.d.ts +4 -2
  22. package/build/types/emphasis/Emphasis.story.d.ts +13 -0
  23. package/build/types/markdown/Markdown.story.d.ts +39 -0
  24. package/build/types/processIndicator/ProcessIndicator.story.d.ts +10 -0
  25. package/build/umd/no-polyfill/main.js +1 -1
  26. package/build/umd/polyfill/main.js +1 -1
  27. package/package.json +5 -5
  28. package/build/types/test-utils/VariantDecorator.d.ts +0 -18
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_deprecatedTypeMapMes;function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{InfoCircle,Warning as AlertTriangle,CrossCircle,CheckCircle,Clock}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement,useState,useRef}from"react";import requiredIf from"react-required-if";import Body from"../body/Body";import{Sentiment,Size,Typography,Variant}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import StatusIcon from"../statusIcon";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),Alert=function(a){var b,c=useTheme(),d=c.isModern,e=(b={},_defineProperty(b,Sentiment.POSITIVE,CheckCircle),_defineProperty(b,Sentiment.NEUTRAL,InfoCircle),_defineProperty(b,Sentiment.WARNING,AlertTriangle),_defineProperty(b,Sentiment.NEGATIVE,CrossCircle),_defineProperty(b,Sentiment.PENDING,Clock),b),f=useState(!1),g=_slicedToArray(f,2),h=g[0],i=g[1],j=a.arrow,k=a.action,l=a.children,m=a.className,n=a.icon,o=a.onDismiss,p=a.message,q=a.type,r=a.variant,s=useRef(null);if(j){var t=withArrow(Alert,j);return/*#__PURE__*/_jsx(t,_objectSpread({},a))}logActionRequired(a);var u=deprecatedTypeMap[q]||q,v=e[u];return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(u),m),onTouchStart:function handleTouchStart(){return i(!0)},onTouchEnd:function handleTouchEnd(a){h&&k&&null!==s&&void 0!==s&&s.current&&!s.current.contains(a.target)&&("_blank"===(null===k||void 0===k?void 0:k.target)?window.top.open(k.href):window.top.location.assign(k.href)),i(!1)},onTouchMove:function handleTouchMove(){return i(!1)},children:[/*#__PURE__*/_jsxs("div",{className:classNames("alert__content","d-flex","flex-grow-1",r),"data-testid":r,children:[function(){return n?/*#__PURE__*/cloneElement(n,{size:24}):d?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:u}):/*#__PURE__*/_jsx(v,{size:24})}(),/*#__PURE__*/_jsxs("div",{className:"alert__message",children:[/*#__PURE__*/_jsx(Body,{as:"span",className:"d-block",type:Typography.BODY_LARGE,children:l||/*#__PURE__*/_jsx(InlineMarkdown,{children:p})}),k&&/*#__PURE__*/_jsx(Link,{href:k.href,className:"m-t-1","aria-label":k["aria-label"],target:k.target,type:Typography.LINK_LARGE,children:k.text})]})]}),o&&/*#__PURE__*/_jsx(CloseButton,{ref:s,className:"m-l-2",onClick:o})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),variant:PropTypes.oneOf(["desktop","mobile"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL,variant:Variant.DESKTOP};export default Alert;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_deprecatedTypeMapMes;function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{InfoCircle,Warning as AlertTriangle,CrossCircle,CheckCircle,Clock}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useRef}from"react";import requiredIf from"react-required-if";import Body from"../body/Body";import{Sentiment,Size,Typography,Variant}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import StatusIcon from"../statusIcon";import Title from"../title/Title";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),Alert=function(a){var b,c=useTheme(),d=c.isModern,e=(b={},_defineProperty(b,Sentiment.POSITIVE,CheckCircle),_defineProperty(b,Sentiment.NEUTRAL,InfoCircle),_defineProperty(b,Sentiment.WARNING,AlertTriangle),_defineProperty(b,Sentiment.NEGATIVE,CrossCircle),_defineProperty(b,Sentiment.PENDING,Clock),b),f=useState(!1),g=_slicedToArray(f,2),h=g[0],i=g[1],j=a.arrow,k=a.action,l=a.children,m=a.className,n=a.icon,o=a.onDismiss,p=a.message,q=a.title,r=a.type,s=a.variant,t=useRef(null);if(j){var u=withArrow(Alert,j);return/*#__PURE__*/_jsx(u,_objectSpread({},a))}logActionRequired(a);var v=deprecatedTypeMap[r]||r,w=e[v];return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(v),m),onTouchStart:function handleTouchStart(){return i(!0)},onTouchEnd:function handleTouchEnd(a){h&&k&&null!==t&&void 0!==t&&t.current&&!t.current.contains(a.target)&&("_blank"===(null===k||void 0===k?void 0:k.target)?window.top.open(k.href):window.top.location.assign(k.href)),i(!1)},onTouchMove:function handleTouchMove(){return i(!1)},children:[/*#__PURE__*/_jsxs("div",{className:classNames("alert__content","d-flex","flex-grow-1",s),"data-testid":s,children:[function(){return n?/*#__PURE__*/_jsx("div",{className:"alert__icon",children:n}):d?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:v}):/*#__PURE__*/_jsx(w,{size:24})}(),/*#__PURE__*/_jsxs("div",{className:"alert__message",children:[q&&/*#__PURE__*/_jsx(Title,{className:"m-b-1",type:Typography.TITLE_BODY,children:q}),/*#__PURE__*/_jsx(Body,{as:"span",className:"d-block",type:Typography.BODY_LARGE,children:l||/*#__PURE__*/_jsx(InlineMarkdown,{children:p})}),k&&/*#__PURE__*/_jsx(Link,{href:k.href,className:"m-t-1","aria-label":k["aria-label"],target:k.target,type:Typography.LINK_LARGE,children:k.text})]})]}),o&&/*#__PURE__*/_jsx(CloseButton,{ref:t,className:"m-l-2",onClick:o})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** Title for the alert component */title:PropTypes.string,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),variant:PropTypes.oneOf(["desktop","mobile"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL,variant:Variant.DESKTOP};export default Alert;
@@ -1 +1 @@
1
- /* eslint-disable no-alert */import{Sentiment}from"../common";import Alert from"./Alert";import{AlertArrowPosition}from"./withArrow";export default{component:Alert,title:"Feedback/Alert",args:{type:Sentiment.POSITIVE,message:"Payments sent to your bank details **today** might not arrive in time for the holidays."},argTypes:{arrow:{name:"arrow (deprecated)",type:{name:"enum",value:Object.keys(AlertArrowPosition)}},type:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var Basic={args:{onDismiss:void 0}};export var WithAction={args:{action:{href:"/",text:"Read more"}}};export var WithArrow={args:{arrow:AlertArrowPosition.TOP_LEFT}};
1
+ /* eslint-disable no-alert */import{ClockBorderless}from"@transferwise/icons";import{Sentiment}from"../common";import Alert from"./Alert";import{AlertArrowPosition}from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Alert,title:"Feedback/Alert",args:{type:Sentiment.POSITIVE,message:"Payments sent to your bank details **today** might not arrive in time for the holidays."},argTypes:{arrow:{name:"arrow (deprecated)",type:{name:"enum",value:Object.keys(AlertArrowPosition)}},type:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var Basic={args:{onDismiss:void 0}};export var WithAction={args:{action:{href:"/",text:"Read more"}}};export var WithArrow={args:{arrow:AlertArrowPosition.TOP_LEFT}};var CustomIcon=function(){return/*#__PURE__*/_jsx("div",{style:{width:"100%",height:"100%",color:"#ffffff",backgroundColor:"#454745",display:"flex",alignItems:"center",borderRadius:"50%",justifyContent:"center"},children:/*#__PURE__*/_jsx(ClockBorderless,{size:"32"})})};export var WithCustomIcon={args:{icon:/*#__PURE__*/_jsx(CustomIcon,{})}};export var WithTitle={args:{type:Sentiment.NEUTRAL,title:"We\u2019re reviewing your information."}};
@@ -1 +1,2 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";var meta={component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"]};export default meta;var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"],args:{onBlur:action("blur"),onClick:action("click"),onFocus:action("focus")}};export var Basic={args:{"aria-label":"Toggle email updates",disabled:!1},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
2
+ var b=useState(!0),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(CheckboxButton,_objectSpread(_objectSpread({},a),{},{checked:d,onChange:function onChange(){return e(!d)}}))}};
@@ -1 +1 @@
1
- import{text}from"@storybook/addon-knobs";import CriticalCommsBanner from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:CriticalCommsBanner,title:"Feedback/CriticalCommsBanner"};export var Basic=function(){var a=text("title","Your account is overdrawn"),b=text("subtitle","Add money within the next 30 days");return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(CriticalCommsBanner,{title:a,subtitle:b,action:{label:"Take action",href:"https://wise.com"}})})};
1
+ import CriticalCommsBanner from".";export default{component:CriticalCommsBanner,title:"Feedback/CriticalCommsBanner",tags:["autodocs"]};export var Basic={args:{title:"Your account is overdrawn",subtitle:"Add money within the next 30 days",action:{label:"Take action",href:"https://wise.com"}}};
@@ -0,0 +1 @@
1
+ import Emphasis from"./Emphasis";export default{component:Emphasis,title:"Typography/Emphasis",tags:["autodocs"]};export var Basic={args:{text:"This is <important>important</important>.\\nThis is <positive>positive</positive>.\\nThis is <negative>negative</negative>.\\nThis is a <warning>warning</warning>.\\n<script>alert(\"nice try!\")</script>"}};
@@ -0,0 +1 @@
1
+ import Markdown from"./Markdown";export default{component:Markdown,title:"Typography/Markdown",tags:["autodocs"]};export var Basic={args:{children:"# Heading\n 1. item one\n 2. item two\n - sublist\n - sublist"}};
@@ -0,0 +1 @@
1
+ import{Size,Status}from"../common";import ProcessIndicator from"./ProcessIndicator";export default{component:ProcessIndicator,title:"Loading/ProcessIndicator",tags:["autodocs"]};export var Basic={args:{size:Size.EXTRA_SMALL,status:Status.PROCESSING}};
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_deprecatedTypeMapMes;import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{InfoCircle,Warning as AlertTriangle,CrossCircle,CheckCircle,Clock}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement,useState,useRef}from"react";import requiredIf from"react-required-if";import Body from"../body/Body";import{Sentiment,Size,Typography,Variant}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import StatusIcon from"../statusIcon";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),Alert=function(a){var b,c=useTheme(),d=c.isModern,e=(b={},_defineProperty(b,Sentiment.POSITIVE,CheckCircle),_defineProperty(b,Sentiment.NEUTRAL,InfoCircle),_defineProperty(b,Sentiment.WARNING,AlertTriangle),_defineProperty(b,Sentiment.NEGATIVE,CrossCircle),_defineProperty(b,Sentiment.PENDING,Clock),b),f=useState(!1),g=_slicedToArray(f,2),h=g[0],i=g[1],j=a.arrow,k=a.action,l=a.children,m=a.className,n=a.icon,o=a.onDismiss,p=a.message,q=a.type,r=a.variant,s=useRef(null);if(j){var t=withArrow(Alert,j);return/*#__PURE__*/_jsx(t,_objectSpread({},a))}logActionRequired(a);var u=deprecatedTypeMap[q]||q,v=e[u];return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(u),m),onTouchStart:function handleTouchStart(){return i(!0)},onTouchEnd:function handleTouchEnd(a){h&&k&&null!==s&&void 0!==s&&s.current&&!s.current.contains(a.target)&&("_blank"===(null===k||void 0===k?void 0:k.target)?window.top.open(k.href):window.top.location.assign(k.href)),i(!1)},onTouchMove:function handleTouchMove(){return i(!1)},children:[/*#__PURE__*/_jsxs("div",{className:classNames("alert__content","d-flex","flex-grow-1",r),"data-testid":r,children:[function(){return n?/*#__PURE__*/cloneElement(n,{size:24}):d?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:u}):/*#__PURE__*/_jsx(v,{size:24})}(),/*#__PURE__*/_jsxs("div",{className:"alert__message",children:[/*#__PURE__*/_jsx(Body,{as:"span",className:"d-block",type:Typography.BODY_LARGE,children:l||/*#__PURE__*/_jsx(InlineMarkdown,{children:p})}),k&&/*#__PURE__*/_jsx(Link,{href:k.href,className:"m-t-1","aria-label":k["aria-label"],target:k.target,type:Typography.LINK_LARGE,children:k.text})]})]}),o&&/*#__PURE__*/_jsx(CloseButton,{ref:s,className:"m-l-2",onClick:o})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),variant:PropTypes.oneOf(["desktop","mobile"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL,variant:Variant.DESKTOP};export default Alert;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_deprecatedTypeMapMes;import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{InfoCircle,Warning as AlertTriangle,CrossCircle,CheckCircle,Clock}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useRef}from"react";import requiredIf from"react-required-if";import Body from"../body/Body";import{Sentiment,Size,Typography,Variant}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import StatusIcon from"../statusIcon";import Title from"../title/Title";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),Alert=function(a){var b,c=useTheme(),d=c.isModern,e=(b={},_defineProperty(b,Sentiment.POSITIVE,CheckCircle),_defineProperty(b,Sentiment.NEUTRAL,InfoCircle),_defineProperty(b,Sentiment.WARNING,AlertTriangle),_defineProperty(b,Sentiment.NEGATIVE,CrossCircle),_defineProperty(b,Sentiment.PENDING,Clock),b),f=useState(!1),g=_slicedToArray(f,2),h=g[0],i=g[1],j=a.arrow,k=a.action,l=a.children,m=a.className,n=a.icon,o=a.onDismiss,p=a.message,q=a.title,r=a.type,s=a.variant,t=useRef(null);if(j){var u=withArrow(Alert,j);return/*#__PURE__*/_jsx(u,_objectSpread({},a))}logActionRequired(a);var v=deprecatedTypeMap[r]||r,w=e[v];return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(v),m),onTouchStart:function handleTouchStart(){return i(!0)},onTouchEnd:function handleTouchEnd(a){h&&k&&null!==t&&void 0!==t&&t.current&&!t.current.contains(a.target)&&("_blank"===(null===k||void 0===k?void 0:k.target)?window.top.open(k.href):window.top.location.assign(k.href)),i(!1)},onTouchMove:function handleTouchMove(){return i(!1)},children:[/*#__PURE__*/_jsxs("div",{className:classNames("alert__content","d-flex","flex-grow-1",s),"data-testid":s,children:[function(){return n?/*#__PURE__*/_jsx("div",{className:"alert__icon",children:n}):d?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:v}):/*#__PURE__*/_jsx(w,{size:24})}(),/*#__PURE__*/_jsxs("div",{className:"alert__message",children:[q&&/*#__PURE__*/_jsx(Title,{className:"m-b-1",type:Typography.TITLE_BODY,children:q}),/*#__PURE__*/_jsx(Body,{as:"span",className:"d-block",type:Typography.BODY_LARGE,children:l||/*#__PURE__*/_jsx(InlineMarkdown,{children:p})}),k&&/*#__PURE__*/_jsx(Link,{href:k.href,className:"m-t-1","aria-label":k["aria-label"],target:k.target,type:Typography.LINK_LARGE,children:k.text})]})]}),o&&/*#__PURE__*/_jsx(CloseButton,{ref:t,className:"m-l-2",onClick:o})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** Title for the alert component */title:PropTypes.string,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),variant:PropTypes.oneOf(["desktop","mobile"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL,variant:Variant.DESKTOP};export default Alert;
@@ -1 +1 @@
1
- import"core-js/modules/es.object.keys.js";/* eslint-disable no-alert */import{Sentiment}from"../common";import Alert from"./Alert";import{AlertArrowPosition}from"./withArrow";export default{component:Alert,title:"Feedback/Alert",args:{type:Sentiment.POSITIVE,message:"Payments sent to your bank details **today** might not arrive in time for the holidays."},argTypes:{arrow:{name:"arrow (deprecated)",type:{name:"enum",value:Object.keys(AlertArrowPosition)}},type:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var Basic={args:{onDismiss:void 0}};export var WithAction={args:{action:{href:"/",text:"Read more"}}};export var WithArrow={args:{arrow:AlertArrowPosition.TOP_LEFT}};
1
+ import"core-js/modules/es.object.keys.js";/* eslint-disable no-alert */import{ClockBorderless}from"@transferwise/icons";import{Sentiment}from"../common";import Alert from"./Alert";import{AlertArrowPosition}from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Alert,title:"Feedback/Alert",args:{type:Sentiment.POSITIVE,message:"Payments sent to your bank details **today** might not arrive in time for the holidays."},argTypes:{arrow:{name:"arrow (deprecated)",type:{name:"enum",value:Object.keys(AlertArrowPosition)}},type:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var Basic={args:{onDismiss:void 0}};export var WithAction={args:{action:{href:"/",text:"Read more"}}};export var WithArrow={args:{arrow:AlertArrowPosition.TOP_LEFT}};var CustomIcon=function(){return/*#__PURE__*/_jsx("div",{style:{width:"100%",height:"100%",color:"#ffffff",backgroundColor:"#454745",display:"flex",alignItems:"center",borderRadius:"50%",justifyContent:"center"},children:/*#__PURE__*/_jsx(ClockBorderless,{size:"32"})})};export var WithCustomIcon={args:{icon:/*#__PURE__*/_jsx(CustomIcon,{})}};export var WithTitle={args:{type:Sentiment.NEUTRAL,title:"We\u2019re reviewing your information."}};
@@ -1 +1,2 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";var meta={component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"]};export default meta;var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"],args:{onBlur:action("blur"),onClick:action("click"),onFocus:action("focus")}};export var Basic={args:{"aria-label":"Toggle email updates",disabled:!1},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
2
+ var b=useState(!0),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(CheckboxButton,_objectSpread(_objectSpread({},a),{},{checked:d,onChange:function onChange(){return e(!d)}}))}};
@@ -1 +1 @@
1
- import{text}from"@storybook/addon-knobs";import CriticalCommsBanner from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:CriticalCommsBanner,title:"Feedback/CriticalCommsBanner"};export var Basic=function(){var a=text("title","Your account is overdrawn"),b=text("subtitle","Add money within the next 30 days");return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(CriticalCommsBanner,{title:a,subtitle:b,action:{label:"Take action",href:"https://wise.com"}})})};
1
+ import CriticalCommsBanner from".";export default{component:CriticalCommsBanner,title:"Feedback/CriticalCommsBanner",tags:["autodocs"]};export var Basic={args:{title:"Your account is overdrawn",subtitle:"Add money within the next 30 days",action:{label:"Take action",href:"https://wise.com"}}};
@@ -0,0 +1 @@
1
+ import Emphasis from"./Emphasis";export default{component:Emphasis,title:"Typography/Emphasis",tags:["autodocs"]};export var Basic={args:{text:"This is <important>important</important>.\\nThis is <positive>positive</positive>.\\nThis is <negative>negative</negative>.\\nThis is a <warning>warning</warning>.\\n<script>alert(\"nice try!\")</script>"}};
@@ -0,0 +1 @@
1
+ import Markdown from"./Markdown";export default{component:Markdown,title:"Typography/Markdown",tags:["autodocs"]};export var Basic={args:{children:"# Heading\n 1. item one\n 2. item two\n - sublist\n - sublist"}};
@@ -0,0 +1 @@
1
+ import{Size,Status}from"../common";import ProcessIndicator from"./ProcessIndicator";export default{component:ProcessIndicator,title:"Loading/ProcessIndicator",tags:["autodocs"]};export var Basic={args:{size:Size.EXTRA_SMALL,status:Status.PROCESSING}};